[jQuery] Image replacement
I have an accordion-like setup for several divs to contract and expand when the header text is clicked on... On the line with the headers I have an arrow image which I would like to swap from up to down on show/hide. Can anyone provide some pointers?
<span style="font-weight: bold;">jquery:</span>
$(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');
}
});
});
<span style="font-weight: bold;">html:</span>
<div class="acc">
<h1>Option 1 <img class="arrow" src="images/up.jpg" /></h1>
<div>Hidden text</div>
<h1>Option 2 <img class="arrow" src="images/up.jpg" /></h1>
<div>Hidden text</div>
<h1>Option 3 <img class="arrow" src="images/up.jpg" /></h1>
<div>Hidden text</div>
</div>
Thanks,
Wil