Menu icon Foundation
How do I use Foundation's javascript events?

I'm sorry for my poor javascript skills but I can't seem to figure out how to make use of the integrated js events that come with Foundation 6.

In this basic example: https://jsfiddle.net/2ybkc92s/

 

Let's say for example that I'd like to add the class .title-bar-colored to the nav with the class .title-bar when the off canvas component is triggered, and remove it when it's closed, how do I use opened.zf.offcanvas and closed.zf.offcanvas to achieve this?

So far I've only managed to come up with this setup but because it's not based on the actual event, it fails often and I end up with a colored titlebar when the off canvas it's not opened.

 

Thanks!

javascripteventtoggle

I'm sorry for my poor javascript skills but I can't seem to figure out how to make use of the integrated js events that come with Foundation 6.

In this basic example: https://jsfiddle.net/2ybkc92s/

 

Let's say for example that I'd like to add the class .title-bar-colored to the nav with the class .title-bar when the off canvas component is triggered, and remove it when it's closed, how do I use opened.zf.offcanvas and closed.zf.offcanvas to achieve this?

So far I've only managed to come up with this setup but because it's not based on the actual event, it fails often and I end up with a colored titlebar when the off canvas it's not opened.

 

Thanks!