CODEWITHSUNDEEP
jquery
Code Lover
Code Lover

Reputation: 8348

jQuery changing class on toggle

I have an issue in changing class for the element collapsed but with my code it is changing class for every element.

$('.panel-heading').click(function(){
    $(this).next('.panel-body').slideToggle('fast');
    $('.panel-handle').toggleClass('glyphicon glyphicon-minus icon-window');
});

How can I change the class only for the respective element?

Upvotes: 0

Views: 125

Answers (3)

Ashisha Nautiyal
Ashisha Nautiyal

Reputation: 1397

use find function to get dom element inside your "panel-heading" class

 $(this).find('.panel-handle').toggleClass('glyphicon glyphicon-minus icon-window');

Upvotes: 0

Pascalz
Pascalz

Reputation: 2378

Try this :

 $(this).find('.panel-handle').toggleClass('glyphicon glyphicon-minus icon-window');

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Your selector $('.panel-handle') targets all the .panel-handle elements in the page, instead you need to find the .panel-handle related to the clicked .panel-heading element

I assume the .panel-handle element is a child element of the .panel-heading element, then

$('.panel-heading').click(function(){
    $(this).next('.panel-body').slideToggle('fast');
    $(this).find('.panel-handle').toggleClass('glyphicon glyphicon-minus icon-window');
});

Upvotes: 3

Related Questions