Amy Ling Amy Ling - 2 months ago 28
jQuery Question

Footer SlideToggle w Plus/Minus ToggleClass

I have a footer, in desktop view, there are 5 columns with links in columns 1-4.

In mobile view, the first 4 column becomes like an accordion. When you click on the h3, the ul slides down.

I got it so that in mobile view, the + class is added to each h3. When clicked, it toggles to the -. However, I can't get it to go back to the + when they click on a different h3. It only works if the user clicks on the same h3 that's already opened and then it goes back to the + class.

Here is my jQuery

jQuery(".footer-blocks > div:not(:last-child) h3").append("<span class='slide-toggle-close float-right transition-all'></span>");

// accordion for footer block links
jQuery(".footer-blocks > div:not(:last-child) h3").click(function(){
jQuery(this).find(".slide-toggle-close").toggleClass("slide-toggle-open");
jQuery(this).next("ul").slideToggle();
jQuery(this).parent().siblings().not(".block-column-5").children().next().slideUp();
return false;
});


And here is my html

<div class="footer-blocks transition-all">
<div class="block-column-1 transition-all"><h3>Equipment</h3>
<ul>
<li><a href="#" target="_blank">Download Catalog (PDF)</a></li>
<li><a href="#">Request Print Catalog</a></li>
<li><a href="#">Rental Equipments</a></li>
<li><a href="#">New &amp; Used Equipments</a></li>
<li><a href="#">Equipment Parts</a></li>
<li><a href="#">Credit Application</a></li>
<li><a href="#">Financing</a></li>
</ul>
</div>
<div class="block-column-2 transition-all"><h3>Support</h3>
<ul>
<li><a href="#">Customer Support</a></li>
<li><a href="#">Service &amp; Maintenance</a></li>
<li><a href="#">Safety Training</a></li>
</ul>
</div>
<div class="block-column-3 transition-all"><h3>Company</h3>
<ul>
<li><a href="#">About Ahern</a></li>
<li><a href="#">Company History</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Investor Relations</a></li>
</ul>
</div>
<div class="block-column-4 transition-all"><h3>Contact</h3>
<ul>
<li><i class="fa fa-envelope"></i> <a href="#">Email Us</a></li>
<li><i class="fa fa-comments-o"></i> <a href="#">Live Chat</a></li>
<li><i class="fa fa-phone"></i> <a href="#">Call Me</a></li>
<li><i class="fa fa-map-marker"></i> <a href="#">Find a Location</a></li>
<li><i class="fa fa-wrench"></i> <a href="#">Schedule a Service</a></li>
</ul>
</div>


https://jsfiddle.net/xxaimsxx/8dL5ufm8/

Answer

Slightly simpler way than your answer - you don't need the children() selector as you're already looking into them with the find():

jQuery(".footer-blocks > div:not(:last-child) h3").click(function(){
        jQuery(this).parent().siblings().find(".slide-toggle-close").removeClass("slide-toggle-open");
        jQuery(this).find(".slide-toggle-close").toggleClass("slide-toggle-open");
        jQuery(this).next("ul").slideToggle();
        jQuery(this).parent().siblings().not(".block-column-5").children().next().slideUp();
        return false;
    });
Comments