CODEWITHSUNDEEP
jquery
422
422

Reputation: 5770

hide show div using Jquery ( reversal needed )

Please check out the fiddle:

LINK HERE

I would like to hide the DIV on page load, and use the ascii charater for up and down arrow on the LINK, so that onclick the div slides down . Works fine but I want the reverse functionality, so that it is hidden on page load. Have tried changing visibility to hidden, didnt work lol

Like:

Show ▼

and

Hide ▲

Upvotes: 0

Views: 977

Answers (5)

SIFE
SIFE

Reputation: 5695

I just improved the code of Mr Andrew:

$(document).ready(function() {
    $("#setup").click(function() {
        $("#closeable").slideToggle(function() {
            if ($(this).is(":visible")) {
                $("#setup").text("Hide Content ▲");
            }
            else {
                $("#setup").text("Show Content ▼");
            }
        });
    });
});

Live demo: http://jsfiddle.net/de4FE/26/

Upvotes: 1

ohmusama
ohmusama

Reputation: 4215

Okay, I tested, and this is what worked.

Note, that we add $("#closeable").hide(); at the beginning of the ready() function, thus hiding our object div.

Second we move the $("#closeable").slideToggle(); after the test. The problem you were experiencing was that slideToggle() executes as a thread and the rest of the code keeps executing, thus, it was still partially visible or just becoming visible for the is(':visible') statement. By testing first, we remove the race condition.

Cheers

$(document).ready(function () {

    $("#closeable").hide();

    $("#setup").click(function() {

        if($("#closeable").is(":visible")) {
            $("#setup").text("Show Content ▼");
        }
        else {
            $("#setup").text("Hide Content ▲");
        }

        $("#closeable").slideToggle();
    });
});

Upvotes: 2

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

How about:

$(document).ready(function() {
    $("#setup").click(function() {
        $("#closeable").slideToggle(function() {
            if ($(this).is(":visible")) {
                $("#setup").text("Hide Content");
            }
            else {
                $("#setup").text("Show Content");
            }
        });
    });
});

Make sure to check the visibility of the content in the callback function (to be sure that the content is visible).

Updated example: http://jsfiddle.net/de4FE/16/

Upvotes: 2

wesbos
wesbos

Reputation: 26317

$(document).ready(function () {

    $("#closeable").slideToggle();
    state = "hide";

    $("#setup").click(function() {
        $("#closeable").slideToggle();

        if (state == "hide") {
            $("#setup").text("Show Content");
            state == "show"
        }
        else {
            $("#setup").text("Hide Content");
            state == "hide"
        }

    });
});

Upvotes: 1

julx
julx

Reputation: 9091

If you want it to be invisible initially you could simply add style="display:none" to the <div> element.

Upvotes: 2

Related Questions