Menu icon Foundation
Toggle Icon when Toggler Fires?

What is the best way to toggle an icon? I am using toggler and I am using an icon as a link to open/close the toggle. I want the icon to change each time its fired. I cannot get this going? Here is what I have:

<p class="toggle-contain"><a data-toggle="panel2"><i class="fi-zoom-in large-icon"></i></a></p>

<div class="callout toggle1" id="panel2" data-toggler data-animate="hinge-in-from-top hinge-out-from-top">
<h4>Hello!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
</div>

 

$(".toggle1").on("on.zf.toggler off.zf.toggler", function() {
"use strict";
  $(".toggle-contain i").toggleClass("fi-zoom-in fi-zoom-out");
});

toggle icontoggler

What is the best way to toggle an icon? I am using toggler and I am using an icon as a link to open/close the toggle. I want the icon to change each time its fired. I cannot get this going? Here is what I have:

<p class="toggle-contain"><a data-toggle="panel2"><i class="fi-zoom-in large-icon"></i></a></p>

<div class="callout toggle1" id="panel2" data-toggler data-animate="hinge-in-from-top hinge-out-from-top">
<h4>Hello!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
</div>

 

$(".toggle1").on("on.zf.toggler off.zf.toggler", function() {
"use strict";
  $(".toggle-contain i").toggleClass("fi-zoom-in fi-zoom-out");
});

This post has been closed. No new replies can be added.

Tom Dean over 3 years ago

Oh boy, I already posted about this and figured it out. lol sry. Here it is:

<p><a data-toggle="panel2"><i class="fi-zoom-in large-icon"></i></a></p>

<div class="callout" id="panel2" data-toggler data-animate="hinge-in-from-top hinge-out-from-top">
<h4>Hello!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
</div>
</div>
$("#panel2").on("on.zf.toggler off.zf.toggler", function(e) {
  $("i").toggleClass("fi-zoom-out fi-zoom-in");
});