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
Post a Comment