Question

I’m using this:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

the thing here is that i change the button to an transparent image.
and i want the image to change when the the <div> is hidden.

for example:
The image is a arrow pointing down (when i click the arrow i want the image to disappear)
and i want a new image pointing up to show the <div>.

If you dont understand i have a image here:

that’s what is happening now; you see that even when my div is hidden it show the “hide div button”.

In the image below you can see what i want!
I want the image to chane when the is hidden to “show div”.

Remenber that the image is .png

Answer 1

You can just use an toogle from one of the effects like fade and slide.

Like this:

$('#me').click(function() {
    var f = $('#pan').is(':hidden') ? 'show' : 'hide';
    if (f == 'hide') {
        $('#pan').slideUp();
        $(this).html('Show ▼');
    }
    if (f == 'show') {
        $('#pan').slideDown();
        $(this).html('Hide ▲');
    }
});

See how it works

I personally don’t like the toggle function, so I kind of just make my own.
I know you want to use an image, but you can still do this with a little change in the code.