0

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/

7
  • Can you create a fiddle or code snippet?
    – StudioTime
    Commented Sep 16, 2016 at 21:20
  • Thanks Darren!! That worked! I knew it had to be simple but I couldn't figure it out. I don't write much js/jquery either.
    – Amy Ling
    Commented Sep 16, 2016 at 21:34
  • That fails...looking at it now - click same element twice and you'll see what I mean
    – StudioTime
    Commented Sep 16, 2016 at 21:34
  • Oh I see that now.
    – Amy Ling
    Commented Sep 16, 2016 at 21:35
  • 1
    Thanks a bunch for helping me with that.
    – Amy Ling
    Commented Sep 16, 2016 at 21:38

2 Answers 2

0

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;
    });
0

With the help of Darren's code, added this and it worked:

jQuery(this).parent().siblings().children().find(".slide-toggle-close").removeClass("slide-toggle-open"); // have to get rid of all +

JSFiddle has been updated.

1
  • Added a slightly simpler answer
    – StudioTime
    Commented Sep 16, 2016 at 21:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.