Question

I have a DIV that expands or collapses when clicked. There is a + sign to indicates it expands, which changes to a – sign to indicate you can collapse it. Instead of the + and – sign, I want to use up and down arrows.

jsfiddle here: http://jsfiddle.net/9PzRr/

I changed the .text to .html and plugged in the unicode values for the up/down arrows in place of the + and – symbols, but only the down arrow would show. I’m open to using an image instead of the ASCII characters, but I am not familiar enough with Javascript/jQuery to know how to tell it to display an image instead of text.

Thanks for any help.

Answer 1

$(document).ready(function() {
    $("#expanderHead").click(function() {
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").text() == "\u25BC") {
            $("#expanderSign").html("\u25B2")
        }
        else {
            $("#expanderSign").text("\u25BC")
        }
    });
});​