Menu icon Foundation
Toggle button for OffCanvas Menu

I have a simple offCanvas menu. To open it you click an icon. I am trying to toggle that icons class to make fi-mail class change to fi-x class after click. This would toggle the mail icon with the X icon on click.

So I'm thinking that event bubbling is the issue but am looking for advice. The toggle works but then when you click it again it will not change back to fi-mail icon unless you click it twice...confused...I have tried everything short of just making it an animated svg lol.

Thanks all!

<div class="contact-toggle-contain">
<a data-open="offCanvas"><i class="fi-mail large-icon"></i></a>
</div>
 
 
 $('.contact-toggle-contain').click(function() {
    $("i").toggleClass("fi-x fi-mail");    
 });           

         

off canvas button toggle

I have a simple offCanvas menu. To open it you click an icon. I am trying to toggle that icons class to make fi-mail class change to fi-x class after click. This would toggle the mail icon with the X icon on click.

So I'm thinking that event bubbling is the issue but am looking for advice. The toggle works but then when you click it again it will not change back to fi-mail icon unless you click it twice...confused...I have tried everything short of just making it an animated svg lol.

Thanks all!

<div class="contact-toggle-contain">
<a data-open="offCanvas"><i class="fi-mail large-icon"></i></a>
</div>
 
 
 $('.contact-toggle-contain').click(function() {
    $("i").toggleClass("fi-x fi-mail");    
 });           

         
Brian Tan over 3 years ago

Try using offcanvas events:

$("#offCanvas").bind("opened.zf.offcanvas closed.zf.offcanvas", function(e) {
  $("i").toggleClass("fi-x fi-mail");
});

Tom Dean over 3 years ago

Oh my gosh I need to get better at JavaScript and more familiar with Foundation events! Thank you so much Brian. I will take this working example and learn from it.

Brian Tan over 3 years ago

According to this resource/info. http://api.jquery.com/bind/

I should probably use .on() :)

Tom Dean over 3 years ago

Sweat, now I learned two new jQuery things! Thanks again Brian, you're a huge help to everyone here!

Brian Tan over 3 years ago

Well, I learned to use toggleClass too.