javascript - jQuery toggle - change background position of image -

javascript - jQuery toggle - change background position of image -

i have jquery toggle function works fine: if click on dt-tag dd section slides or down. supposed to. want extend toggle function: background image of span element within dt-tag supposed alter position everytime click on dt-tag (display arrow or down). tried accomplish next code, can't work

<dt><?php echo $this->__($_filter->getname()) ?><span id="cpl"></span></dt> <dd><?php echo $_filter->gethtml() ?></dd> jquery('dd').hide(); jquery('dt').click(function() { var toggle = jquery(this).nextuntil('dt'); toggle.slidetoggle(); jquery('dd').not(toggle).slideup(); jquery('#cpl').toggleclass('clicked'); }); #cpl { width: 90px; height: 11px; display: inline-block; margin: 0 0 0 10px; background:transparent url('../images/arrow.gif') no-repeat; background-position: 0 0; } #cpl.clicked { background-position: 0 -15px; }

any help much appreciated. give thanks you.

three steps: 1) give spans mutual class instead of id:

<span class="cpl"></span>

2) alter lastly line within click-function to:

jquery('dt').click(function() { /* code */ // selects element class 'cpl' within clicked element jquery('.cpl', this).toggleclass('clicked'); });

3) alter css address class 'cpl':

.cpl { ... } .cpl.clicked { ... }

demo 3 'dt'.

javascript jquery toggle