Добавить/удалить активный класс toggle

Question

Ive создал этот маленький переключатель, но я все еще выясняю, как добавить класс 'active' в мой < ul>, когда вы нажимаете, чтобы открыть переключатель, и удалите 'active когда вы его закрываете.

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

Вот мой код:

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

ЯШ:

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

заранее спасибо за любую помощь.

Answer 1

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

Answer 2

Вы можете использовать siblings найти hidden-content DIV, который находится рядом с a тега, в противном случае она будет переключать все hidden-content Див, присутствующий в DOM и использовать toggleClass() тумблер active класс для дел.

$(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

Answer 3

Если вы хотите добавить активный класс для ссылки использовать код

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