Question

How can I expand a hidden on page load div from a link saying “Show info” but when the link has been clicked and the information was displaying the link text would change to “Hide Info” and the box would then close the opposite way it opened when “Hide Info” link was clicked?

Thanks.

Answer 1

You can do this quite easy:

$("#infoToggler").click(function()
{
    if($(this).html() == "Show info")
    {
        $(this).html("Hide info");
        $("#infoBox").show();
    }
    else
    {
        $(this).html("Show info");
        $("#infoBox").hide();
    }
});

Here is a jsfiddle example: http://jsfiddle.net/aFzG9/