How to add active class on click and remove active on click

Question

I am creating accordian menu with simple js. How can I add and remove active class on click open/close?

<div class="mobile-categories">
    <h4 class="mcategory-toggle">Vehicles</h4>
    <ul class="msub-categories">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
    <h4 class="mcategory-toggle">Education</h4>
    <ul class="msub-categories">
        <li>Option 10</li>
        <li>Option 20</li>
        <li>Option 30</li>
    </ul>
    <h4 class="mcategory-toggle">Shops</h4>
    <ul class="msub-categories">
        <li>Option 14</li>
        <li>Option 25</li>
        <li>Option 36</li>
    </ul>
</div>

a fiddle

Paul Boutes · Accepted Answer · 2015-08-10 22:12:40Z

2

You can use toggleClass method.

  $(document).ready(function($) {
                $('.mobile-categories').find('.mcategory-toggle').click(function(){

            var self = $(this);

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

            //Remove active class for all element, except the current selected item
            $('.mcategory-toggle').not(self).removeClass('active');

            //Toggle active class for the current element
            self.toggleClass('active');

                  //Hide the other panels
            $(".msub-categories").not(self.next()).slideUp('fast');

                });
      });

You can see Working Fiddle

answered Aug 10, 2015 at 22:12

Paul Boutes

3,3152 gold badges21 silver badges22 bronze badges

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

Comments

madox2 · Accepted Answer · 2015-08-10 22:02:16Z

0

Add jQuery toggle class method to your click function:

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

answered Aug 10, 2015 at 22:02

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Comments

Sunil R. · Accepted Answer · 2019-04-02 13:50:56Z

0

Add remove class on Click Using jQuery

$(document).ready(function(){
$('.btn').on('click',function(){
      if($('.box').hasClass('current')){
        $('.box').removeClass('current');
      }else{
        $('.box').addClass('current');
      }
   });
 });

edited Apr 2, 2019 at 13:50

answered Apr 1, 2019 at 11:45

Sunil R.

8818 silver badges16 bronze badges

1 Comment

Peyman Over a year ago

Think this one is understandable due to the title but I'd recommend reading stackoverflow.com/help/how-to-ask . even a short well-thought-out sentence can make the question much easier to understand.

Collectives™ on Stack Overflow

How to add active class on click and remove active on click

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related