Menu icon Foundation
Trigger on toggler (Foundation 6)

Hello.
Could someone give me an example of How to catch the event triggered by the toggler when I click on the toggler?
I want to respaw Masonry after I clicked on the Toggler (the toggler show a div). Same thing when I close the div...
Also I want to change the class of the toggler itself when clicked (like an on/off switch).
Thanks.

togglereventtriggertoggle

Hello.
Could someone give me an example of How to catch the event triggered by the toggler when I click on the toggler?
I want to respaw Masonry after I clicked on the Toggler (the toggler show a div). Same thing when I close the div...
Also I want to change the class of the toggler itself when clicked (like an on/off switch).
Thanks.

Brian Tan almost 4 years ago

Refer to http://foundation.zurb.com/sites/docs/javascript.html#events

In this case, if you have a the following:

<ul class="menu" id="menuBar" data-toggler=".expanded">

setup event listening as such.

$("#menuBar")
  .on("on.zf.toggler", function(e) {
    alert("menuBar toggled on");
  })
  .on("off.zf.toggler", function(e) {
    alert("menuBar toggled off");
  });

To toggle the data-toggler class itself, take a look at jQuery toggleClass() http://api.jquery.com/toggleClass/

Vincent Morel almost 4 years ago

Thanks a lot! Javascript is not my strength, always need a good example! :)