Issue with toggle state in accordion menu

Question

I have a footer with links, that when in mobile view, the links are hidden.

When the user clicks a header, the links should toggle down, and the icon next to the header should change from a plus to minus icon. As seen here, that isn't working.

When the user clicks the expanded header again, the section collapses and the icon should return to a plus sign, but is remaining in as a minus sign.

HTML

  <div class="row">
  <div class="col-lg-12">
    <div class="footer-links">
    <div class="row">
      <div class="panel-heading panel-columns panel">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-target="#about" data-parent="#accordion">
            Header
          </a>
        </h4>
        <ul class="visible-sm visible-md visible-lg collapse" id="about">
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
        </ul>
      </div>
      <div class="panel-heading panel-columns panel">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-target="#why" data-parent="#accordion">
            Header
          </a>
        </h4>
        <ul class="visible-sm visible-md visible-lg collapse" id="why">
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
        </ul>
      </div>
      <div class="panel-heading panel-columns panel">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-target="#quicklinks" data-parent="#accordion">
            Header
          </a>
        </h4>
        <ul class="visible-sm visible-md visible-lg collapse" id="quicklinks">
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
        </ul>
      </div>
      <div class="footer-offer-columns">
        <h4 class="deal-text"><strong>Ad text will</strong> go here</h4>
      </div>
      <div class="footer-share-columns">
        <div class="footer-share">
          <a href=""><img src="/img/facebook_icon.png"></a>
          <a href=""><img src="/img/twitter_icon.png"></a>
          <a href=""><img src="/img/linkedin_icon.png"></a>
          <a href=""><img src="/img/youtube_icon.png"></a>
          <a href=""><img src="/img/google_icon.png"></a>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>

jQuery

$('.panel-heading').on('click', '.accordion-toggle', function (){
$(".accordion-toggle").each(function(){
  console.log($("this"));
  $(this).removeClass('visibility-status');
  console.log('open');
});

$(this).toggleClass('visibility-status');
});

CSS

.accordion-toggle:after {
  content: '+';
  font-family: 'Material Icons';
  font-size: 22px;
}
.accordion-toggle.visibility-status:after {
  content: '-';
  font-family: 'Material Icons';
  font-size: 22px;
}

Could always ditch jQuery for this and repurpose something like [this solution](http://stackoverflow.com/a/36555859/5116879) to produce the effect natively. Otherwise, the problem seems to be that it doesn't actually apply the `visibility-status` class. Probably because you meant to toggle it, not remove it in the first place. — abluejelly, Apr 14 '16 at 22:29
Can you provide an example of getting the `visibility-status` class to work? The solution you linked to, doesn't have the collapse other sections when opening another, ability. The version I've built, does everything except allow you to toggle the icon back to plus, if you click the same header again. — user3438917, Apr 15 '16 at 15:07
It's easy to convert my example to collapse the other selections. Use `radio`s instead of `checkbox`en, and make sure they all share a unique, obviously-garbage name (like `_acrd$0` or whatever). Hence why I said "repurpose something like". If you read the entire solution, I even noted this in that answer. — abluejelly, Apr 15 '16 at 17:50
I shouldn't need to convert my markup, as the functionality is mostly all there. I just need a conditional statement to revert the icon when the header has class `.collapsed`, back to a plus sign. Something similar to this logic: //when visibility status has class collapsed, set the icon for plus in that class `if($(".visibility-status:after").hasClass("collapsed")){ $("visibility-status:after").css("content", "\E145"); }` — user3438917, Apr 15 '16 at 18:09
Well if you also read the rest of my first comment, you might've gotten what I think is probably the issue.... Because the CSS is fine, and would do it for you if `.visibility-status` is being toggled correctly. But looking at your code, it looks like you remove the class, then toggle it- meaning you only ever turn the class *on* when the user clicks on your heading. Easy fix, move the toggle before you call it. I'll post this as an answer in a moment. — abluejelly, Apr 15 '16 at 18:18

Tricky12 · Accepted Answer · 2016-04-15T18:30:56.043

1

Give the below code a try in place of your jQuery. You currently are not checking to see if the current header being clicked is visible or not. You remove the visibility-status class, and then toggle it. Doing that, it will always toggle the class ON since you remove it first.

$('.panel-heading').on('click', '.accordion-toggle', function() {
    //Store visible status of clicked header
    var isVisible = $(this).hasClass('visibility-status');

    //Remove visibility from all headers
    $('.accordion-toggle').removeClass('visibility-status');

    //Turn on the class if it was already off
    if (!isVisible) {
        $(this).addClass('visibility-status');
    }
});

edited Apr 15 '16 at 18:30

answered Apr 15 '16 at 18:22

Tricky12

6,752
1
27
35

1

I'm a dunce for thinking all you had to do was move it to the top, but then, I still think a native refactor is a better move. Also nice job shrinking the `removeClass()` loop, but you don't need to remove the class if you already removed it. Edit suggestion incoming =P – abluejelly Apr 15 '16 at 18:25
@abluejelly Good catch! For some reason it automatically rejected your edit, but I went ahead and made the change. I don't disagree with a refactor, but I also think this is a pretty simple bit of jQuery as well. – Tricky12 Apr 15 '16 at 18:31
So this is good, except now it doesn't close the other headers when another one is open. So it should be: one header is opened, then another is opened and the previous is closed. – user3438917 Apr 15 '16 at 18:34
I believe it's because you fixed a typo while I was making my edit, since the auto-reject said "conflicts with subsequent". As for the jQuery, yeah, it's always really simple jQuery- all the hard work is offloaded on the bloated library, hidden from the developer haha – abluejelly Apr 15 '16 at 18:34
@user3438917 Ah, right, you don't have your expand/contract attached to "which accordion pane has `.visibility-status`". You'll have to switch the "Remove visibility from all headers" section back to what you had for doing that- the `.each();` chunk. The console logging was thought to just be console logging, not actually anything special, hence why Tricky condensed it down. – abluejelly Apr 15 '16 at 18:37
I believe the first version of @Tricky12 solution fully worked, but then I updated my code to reflect the changes. Can't find the original solution. – user3438917 Apr 15 '16 at 18:39
@user3438917 The current code works exactly the same as the other solution, just with less code. I don't think I fully understand your issue. It removes the `visibility-status` class and therefore should revert back to the '+'. – Tricky12 Apr 15 '16 at 18:46
I realized that it was a chrome issue, when testing for iOS and not having it at 100% zoomed. Weird bug. – user3438917 Apr 15 '16 at 18:55
Thanks for your input as well, @abluejelly. – user3438917 Apr 15 '16 at 18:56

Issue with toggle state in accordion menu

1 Answers1