We help IT Professionals succeed at work.

change buton on toggle

Neil_Bradley
Neil_Bradley asked
on
This is a link to a test page (http://gromit.utopia.co.nz/~ballochd/show-hide/eg.html)  showing a simple jquery toggle open and close effect. I would like to update the script so that when the hidden box is visible the button changes from open.png to closed.png.
Assistance appropriated.
N
Comment
Watch Question

Lead Developer
Commented:
Try this:

<!DOCTYPE HTML>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="animatedcollapse.js">
 
 
</script>
 

<script type="text/javascript">
 
animatedcollapse.addDiv('test', 'fade=1,height=80px')

 
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
 //$: Access to jQuery
 //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
 //state: "block" or "none", depending on state
 }
 
$(document).ready(function(){
	$(".button").click(function(){
		if($(this).attr('src') == 'open.png'){
			$(this).attr('src','closed.png');	
		}else{
			$(this).attr('src','open.png');	
		}	
	});
});
 
animatedcollapse.init()
 
</script>
 </head>

<body>

 
<a href="javascript:animatedcollapse.toggle('test')"><img src="open.png" border="0" class="button" /></a> 
 
<div id="test" style="width: 300px; background: #FFFFCC; display:none">
 <b>Content inside DIV!</b><br />
 <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>
</body>
 </html>

Open in new window



Note: make sure you add a class of .button to the image
Neil_BradleyWeb UX/UI Developer

Author

Commented:
Nice work (http://gromit.utopia.co.nz/~ballochd/show-hide/eg.html). Works beautifully.
Cheers,
N

Explore More ContentExplore courses, solutions, and other research materials related to this topic.