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 & 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 & 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>