CODEWITHSUNDEEP
jquery
Fenrir
Fenrir

Reputation: 231

Jquery's siblings() doesn't work as expected

The following example demonstrates my problem.

https://jsfiddle.net/bff56wup/3/

$('.accordion-toggle').on('click', function() {
    $(this).toggleClass('active').siblings().removeClass('active');
});

When I expand one of the accordion question and try to expand another one while the first one is open, the arrow is not changed. .siblings() should handle that but it doesnt.

EDIT: Corrected spelling mistake, error is still there

Upvotes: 0

Views: 158

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because the .accordion-toggle elements are not siblings of each other, hence siblings() returns nothing.

To fix the logic you can select the .active elements directly and remove the class from them:

$('.accordion-toggle').on('click', function() {
  $('.active').not(this).removeClass('active');
  $(this).toggleClass('active');
});

Updated fiddle

Upvotes: 2

Related Questions