toggle css style in simple jquery accordian

Question

I have a simple accordian I have made with Jquery. It toggles open and close on the item and also closes down any other active items.

Here is the code:

  $(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

    $(this).toggleClass('activeState');

      // Remove active state from other panels not selected
      $("#accordian").not($(this)).removeClass('activeState');

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');

    });
  });

Right now I am just using the 'activeState' class to add a background colour of yellow (later I am looking to use icon classes). Now it toggles well when opening and closing the same item. But I want it to toggle/remove the activeState class when another accordian item is clicked on (then obviously append the activeState class to the newly opened accordian item. I am attempting to use the ".not()" jQuery function to remove the activeState class from any of the '.accordian-toggle' items that is not the active object being clicked on. I am here because I am not having any luck with it.

Here is the JSFiddle https://jsfiddle.net/0LLncd4d/26/ Can I please ask for some assistance in what I may have overlooked?

Try using this for unselecting $(".accordion-toggle").not($(this)).removeClass('activeState'); — blessanm86
– blessanm86, Commented Feb 22, 2016 at 6:49

Banik · Accepted Answer · 2016-02-22 08:11:37Z

3

replace the two lines

$(this).toggleClass('activeState');
$("#accordian").not($(this)).removeClass('activeState');

with

$('.accordion-toggle').removeClass('activeState');
if($(this).parent().find('.accordion-content').css('display')=='none'){
   $(this).addClass('activeState');
}

edited Feb 22, 2016 at 8:11

answered Feb 22, 2016 at 6:55

Banik

9216 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryan Coolwebs Over a year ago

Thanks for the help. I already tried this before and whilst it works to toggle off the active state when clicking on another item - it fails to remove it when you just keep toggling the one item. jsfiddle.net/0LLncd4d/28

Ryan Coolwebs Over a year ago

Actually like what yours can do when I use :after with CSS content property jsfiddle.net/0LLncd4d/30

Sumanta736 · Accepted Answer · 2016-02-22 06:55:41Z

1

Try like this:

 $(document).ready(function($) {
$('#accordion').find('.accordion-toggle').click(function(){

$(this).toggleClass('activeState');

  // Remove active state from other panels not selected
  $(".accordion-toggle").not($(this)).removeClass('activeState');

  //Expand or collapse this panel
  $(this).next().slideToggle('fast');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');

  });
 });

answered Feb 22, 2016 at 6:55

Sumanta736

6953 silver badges10 bronze badges

1 Comment

Ryan Coolwebs Over a year ago

I see. Simple fix. Replace $("#accordian").not($(this)).removeClass('activeState'); WITH $(".accordion-toggle").not($(this)).removeClass('activeState'); THANKS!

Collectives™ on Stack Overflow

toggle css style in simple jquery accordian

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related