javascript - Chevron Icon pointing up or down depending on accordion position -


i've got accordion i've built using jquery ui. need chevron icons point or down depending on if section open or closed. problem jquery. @ least is. i'm seeing both chevrons on load , once clicked chevron doesn't change @ 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 --> 

you need reference this toggles element clicking on (not of them @ once). once have $(this), can use .find search chevron within link.

finally, can use toggleclass switch between class states. allows click link repeatedly , have switch between class states.

$(function() {     //add down .chevrons     $(".section .chevron").addclass('down');       //toggle up/down classes     $(".section a").click(function() {         var $chevron = $(this).find('.chevron');                         $chevron.toggleclass("down up");     }); }); 

then css, set classes correct chevron image:

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

Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -