Menu icon Foundation
Multiple toggles launching one dropdown

Hi people!

I know that someone suggested this feature, but after coming from Foundation 5, the migration of our projects to Foundation 6 is becoming a real pain.

The problem is that I used to launch a dropdown panel, from different toggles. So I could have a common content "launchable" by several links in the same page. In Foundation 6 this behavior is no longer supported, because it would attach to the first element only.

Tried to create and remove both toggles and dropdown (manually adding the data-dropdown and data-toggle atributes) dinamically every time I click in the objects which should open a dropdown, and destroying and reinvoking the dropdown, without success.

Anyone could suggest how to recreate this behavior in F6?

Thanks in advance! 

 

dropdowntoggledata-toggledata-dropdownfoundation 6multiple

Hi people!

I know that someone suggested this feature, but after coming from Foundation 5, the migration of our projects to Foundation 6 is becoming a real pain.

The problem is that I used to launch a dropdown panel, from different toggles. So I could have a common content "launchable" by several links in the same page. In Foundation 6 this behavior is no longer supported, because it would attach to the first element only.

Tried to create and remove both toggles and dropdown (manually adding the data-dropdown and data-toggle atributes) dinamically every time I click in the objects which should open a dropdown, and destroying and reinvoking the dropdown, without success.

Anyone could suggest how to recreate this behavior in F6?

Thanks in advance! 

 

Igal about 1 year ago

Have you ever figured that out?  

My dropdown's position is based on the first toggle regardless of which toggle triggered it.  It'd be nice to have it open relatively to the toggle that triggered it rather than the first one.

Igal about 1 year ago

FYI: My hack for setting two different toggle triggers for the "same" dropdown is to give the second toggler a different ID and then clone the toggle target on jQuery ready event.

Given two togglers, one targeting a dropdown with the id of #dropdown-login and the other targeting a dropdown with the id of #dropdown-login-small (since it is shown only for small screen) I have added the dropdown markup only once, with the id of #dropdown-login, and cloned it with JavaScript with the following code:

	// clone #dropdown-login to #dropdown-login-small
	var $toggleTargetClone = $("#dropdown-login").clone();
	$toggleTargetClone.attr("id", "dropdown-login-small");
	$("body").append($toggleTargetClone);

 

jonkern@comcast.net 9 months ago

Not sure if this helps, but in my Rails app (with haml), I needed multiple toggles on the same page.

So I invoke the 'help_callout' partial with an optional id as follows:

%div
  %label
    = (t 'banned_countries.label')
    %span{ title: (t 'banned_countries.tooltip'), data: {tooltip: true}}
      = fa_icon 'fw question-circle'
    = render layout: 'help_callout', locals: {:id => 'banned'} do
      = markdown(t 'banned_countries.info')
    = f.text_field :banned_country_list
...

  %label
    %span= f.check_box :multilingual, class: 'js-checkbox_toggle'
    = (t '.multilingual_support')
    - title = (t '.multilingual_support_tooltip')
    %span{ title: title, data: {tooltip: true}}
      = fa_icon 'fw question-circle'
  #js-org_multilingual_is_checked
    %div
      = render layout: 'help_callout', locals: {id: 'languages'} do
        = markdown(t 'iq.admin.orgs.extra_form_fields.supported_languages_info')

 

And the partial uses the id as shown below:

-# The id is used if you need to have multiple help callouts on the same page
- toggle_id = local_assigns.fetch :id, 'help_text_1'
.callout.secondary
  .row.align-middle.align-justify
    .shrink.columns
      %a{ data: { toggle: toggle_id } }= (t '.show_help')
  .hide{ data: { toggler: '.hide' }, id: toggle_id }
    =yield