Goodshape
New Member
Anyone familiar with jQuery?
I'm trying to set up an accordion script using h3's to raise/lower their corresponding div and raise all the others. I've got that first bit working without problems.
But.. I'd like to get the background colour on the h3 to change whenever it's div is active, and obviously change back when it's inactive, so I'm using toggle(function()) to switch between a white and a silver background on h3.
This works fine when the user clicks the same h3 to raise and lower the same div, but if they click a different h3, jQuery still expects the original h3 to be 'active' and therefor doesn't switch to silver on the next click.
Here's an example :
http://michael.flanagan.ie/work/snippits/accordion.html
And the code :
jQuery :
HTML :
I'm trying to set up an accordion script using h3's to raise/lower their corresponding div and raise all the others. I've got that first bit working without problems.
But.. I'd like to get the background colour on the h3 to change whenever it's div is active, and obviously change back when it's inactive, so I'm using toggle(function()) to switch between a white and a silver background on h3.
This works fine when the user clicks the same h3 to raise and lower the same div, but if they click a different h3, jQuery still expects the original h3 to be 'active' and therefor doesn't switch to silver on the next click.
Here's an example :
http://michael.flanagan.ie/work/snippits/accordion.html
And the code :
jQuery :
Code:
$('div.dropList1> div').hide();
$('div.dropList1> h3').click(function() {
$(this).next('div').slideToggle()
.siblings('div:visible').slideUp();
});
$('div.dropList1> h3').toggle(function(){
$(this).css('background-color','#eaeaea')
.siblings('h3').css('background-color','white')
},function(){
$(this).css('background-color','white');
});
Code:
<div class="dropList1">
<h3>This is the first header.</h3>
<div>This is the first content.</div>
<h3>This is the second header.</h3>
<div>This is the second content.</div>
<h3>This is the third header.</h3>
<div>This is the third content.</div>
<h3>This is the forth header.</h3>
<div>This is the forth content.</div>
<h3>This is the fifth header.</h3>
<div>This is the fifth content.</div>
<h3>This is the sixth header.</h3>
<div>This is the sixth content.</div>
</div>