Question

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?

Answer 1

You can hide one initially via CSS, then just toggle the two in your function, use this for CSS:

.hide { dislay: none; } //Reverse if "Hide" should be the default button

And this jQuery, using .toggle() (without arguments, it toggles visibility):

$("#slider").click(function() {
  $(".help").slideToggle();
  $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() {
    $("#slider img").toggle();
  });
});

This would toggle the visibility of both images…since one’s hidden and you only have 2, it effectively swaps them. Also make sure to fix your alt/title attributes on the .show one for the screen reader folks 🙂