On Nov 19, 2007, at 3:11 PM, yetanother wrote:
I have a simple accordion set up with the code below, but I want to be
able to change the header's background image from an up arrow state to
down arrow state and back automatically. Any ideas on where to go from
here?
$(document).ready(function() {
$('div.acc> div').hide();
$('div.acc> h1').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('slow', function() {
$nextDiv.slideToggle('slow');
});
} else {
$nextDiv.slideToggle('slow');
}
});
});
-------------------------------------
<div class="acc">
<h1>Test</h1>
<div>Hidden Text</div>
<h1>Test</h1>
<div>Hidden Text</div>
</div>
Hi Will,
(sorry if this is a double post)
After the .click() line, you could do something like this...
var currImage = $(this).css('backgroundImage');
$(this).css({backgroundImage: currImage == 'first-image.jpg' ?
'second-image.jpg' : 'first-image.jpg'});
... replacing 'up-arrow.jpg' and 'second-image.jpg' with the real
names of the files.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
