雪佛龙图标根据手风琴位置向上或向下指向

Question

I've got an accordion I've built using jQuery UI. I need the chevron icons that point up or down depending on if the section is open or closed. The problem is my jQuery. At least initially it is. I'm seeing both chevrons on load and once clicked the chevron doesn't change at all.

Jquery

$(function() {

     $(".section a").click(function() {

          $(".chevron").removeClass("chevron").addClass("up");
    });
});

CSS

.chevron {
background: url("images/down.png") no-repeat;
}

.up {
background: url("images/up.png");
}

HTML

 <div class="section">
   <a href="#"><div class="tab active">
   <span class="chevron"></span><h3>Section 1</h3>
   </div></a> <!-- tab -->

Answer 1

You need to reference this so it toggles the element you are clicking on (not all of them at once). Once you have $(this) , you can use .find to search for the chevron within the link.

Finally, you can use toggleClass to switch between the class states. This allows you to click the link repeatedly and have it switch between the class states.

$(function() {
    //Add down to all .chevrons
    $(".section a .chevron").addClass('down'); 

    //Toggle up/down classes
    $(".section a").click(function() {
        var $chevron = $(this).find('.chevron');                
        $chevron.toggleClass("down up");
    });
});

Then for CSS, set the classes to the correct chevron image:

.chevron.up { background-image('images/up.png'); }
.chevron.down { background-image('images/down.png'); }