How do I include indicator images with <div> show/hide code in JavaScript?

I'm using this code to hide and show divs:

$(function() {
    $('a.hide').click(function() { 
        $(this).closest('.hideable').find('.hide-container').toggle();
    });

    $('a#hide-all').click(function() {
        $('.hide-container').hide(); });
    $('.hide-container').hide();
});

I have a problem: how can I add images such as a + mark when the div is hidden and a - mark when it is开发者_高级运维 shown?

Set the image as a background in your css:

.hideable {
    background-image: url(minus.png);
    background-repeat: no-repeat;
    background-position: left 1px;
    padding-left: 12px;
}
.hidden {
    background-image: url(plus.png);
}
.hidden .hide-container {
    display: none;
}

Then, use .toggleClass() instead of .toggle(). Apply the class to the parent element:

$('a.hide').click(function() { 
    $(this).closest('.hideable').toggleClass("hidden");
});
$('a#hide-all').click(function() {
    $('.hideable').addClass("hidden");
});
$('.hideable').addClass("hidden");

Working demo: http://jsfiddle.net/gilly3/rK7yN/

Edit: If you want the images to be clickable:

.hideable a.hide {
    background-image: url(minus.png);
    background-repeat: no-repeat;
    background-position: left 1px;
    padding-left: 12px;
}
.hidden a.hide {
    background-image: url(plus.png);
}
.hidden .hide-container {
    display: none;
}

Demo: http://jsfiddle.net/gilly3/rK7yN/1/

While reformating your code it came out with this:

$('a.hide').click(function() { 
   $(this).closest('.hideable').find('.hide-container').toggle(); 
});
$('a#hide-all').click(function() {
   $('.hide-container').hide();
});
$('.hide-container').hide();

}); // <-- What is this?

Maybe that is why it is not working?