Menu icon Foundation
data-toggle a selector besides ID

I'm trying to toggle a dropdown and don't have the option of using an ID. (We use a system that will remove my ID and create its own.) It's not working to target a class. Any suggestions?

<!-- Code that doesn't work -->
<a class="button" data-toggle=".toggle-class"></a>
<div class="toggle-class" data-dropdown data-auto-focus="true"> <!-- Stuff --> </div>

<!-- Code that works but I can't use -->
<a class="button" data-toggle="toggle-id"></a>
<div id="toggle-id" data-dropdown data-auto-focus="true"> <!-- Stuff --> </div>

toggle

I'm trying to toggle a dropdown and don't have the option of using an ID. (We use a system that will remove my ID and create its own.) It's not working to target a class. Any suggestions?

<!-- Code that doesn't work -->
<a class="button" data-toggle=".toggle-class"></a>
<div class="toggle-class" data-dropdown data-auto-focus="true"> <!-- Stuff --> </div>

<!-- Code that works but I can't use -->
<a class="button" data-toggle="toggle-id"></a>
<div id="toggle-id" data-dropdown data-auto-focus="true"> <!-- Stuff --> </div>
Keith Burgie over 2 years ago

I rolled my own for now with jQuery but still interested in a solution for using Foundation's JS.

$('.click-to-show').click(function() {
  $('.show-on-click').toggleClass('is-open');
});

Rafi Benkual over 2 years ago

Toggler is made to target id's only (for now)

Some simple jQuery can do the trick. I would be careful using a class if you will re-use the class in many places.

$(".close-dropdown").click(function() {
  $('.dropdown').toggleClass('something');
});