Toggle button and Toggle visibility
- by danit
I'm using this jQuery to hide a DIV:
$("#slider").click(function() {
$(".help").slideToggle();
$("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() {
$("#slider a").text($(this).is(':visible') ? "Hide" : "Show");
});
});
Instead of altering the text show I want to display a graphic, I want the grpahic to change based on the .toggle
Current HMTL:
<div id="wrapper">
LI ITEMS
</div>
<div class="help">
IMAGE
</div>
<div id="slider">
<a href="#">Hide</a>
</div>
I'd like to add two images into .slider, removing the <a>:
<div id="slider">
<img class="show" title="Hide" alt="Hide" src="images/showbutton.png" />
<img class="hide" title="Hide" alt="Hide" src="images/hidebutton.png" />
</div>
Perhaps I can use css to hide the 'hide' button, then switch that using jquery in some way?
Any suggestions?
