CODEWITHSUNDEEP
jquery
Sheikh Farzaib
Sheikh Farzaib

Reputation: 68

Jquery function not working to all buttons

i am trying to make an click function where buttons are same class name. problem is when i click the first accordion-button my code is working but not for all accordion-buttons heres the code

 $('.accordion-button').on('click',function(){
  if($('.accordion-button').attr('aria-expanded') === "true"){
    $(this).find('.featherIcon').addClass('active');
    console.log('Clicked');
    
  } 
 else if($('.accordion-button').attr('aria-expanded') === "false"){
    $('.featherIcon').removeClass('active');
    console.log('false');
  } 
});

Upvotes: 0

Views: 59

Answers (1)

John Glenn
John Glenn

Reputation: 1629

Your query is returning an array of buttons that match your class selector $('.accordion-button'). You need to .each through these elements. Calling .attr('aria-expanded') on your result array is only using the first entry.

You could rework your click function to be more like this:

$('.accordion-button').each(function() {
    if ($( this ).attr('aria-expanded') === "true") {
        $(this).find('.featherIcon').addClass('active');
        console.log('Clicked');
    } else ...

Upvotes: 1

Related Questions