CODEWITHSUNDEEP
jqueryhtmltoggle
user3507631
user3507631

Reputation: 327

Add/remove active class to toggle

Ive created this little toggle, but I'm still figuring out how can I add a class 'active' to my < ul > when you click to open the toggle, and remove the 'active' class once you close it.

Jsfiddle: http://jsfiddle.net/0mpuh2f2/

Here is my code:

<ul class="accordion-media-types">
 <li>
  <a href="">Info</a>
    <div class="hidden-content">
      content
    </div>
 </li>
</ul>

js:

$(document).on('click','.accordion-media-types a', function(e){
    e.preventDefault();
    $('.hidden-content').slideToggle(500);
});

thanks in advance any help.

Upvotes: 0

Views: 1661

Answers (3)

collab-with-tushar-raj
collab-with-tushar-raj

Reputation: 1287

YOUR UPDATED FIDDLE:

$(document).on('click', '.accordion-media-types a', function (e) {
   e.preventDefault();
   $(this).closest('.accordion-media-types').toggleClass('active').find('.hidden-content').slideToggle(500);
});

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can use siblings to find the hidden-content div which is next to a tag, otherwise it will toggle all hidden-content div present in DOM and use toggleClass() toggle active class for div.

$(document).on('click','.accordion-media-types a', function(e){
    e.preventDefault();
    $(this).siblings('.hidden-content').slideToggle(500);
    //toggle class to ul
    $(this).closest('.accordion-media-types').toggleClass('active');
});

JSFiddle Demo

Upvotes: 1

Dmitry Shurshilin
Dmitry Shurshilin

Reputation: 766

If you wanna add active class for your link use the code

                $(document).on('click','.accordion-media-types a', function(e){
                    e.preventDefault();
                    $(this).toggleClass('active');
                    $('.hidden-content').slideToggle(500);
                });

Upvotes: 1

Related Questions