LearnFast.Ninja

jQuery if div is visible

Build custom div, Build function to set hide div if it visible, and show it if it's hide, The main idea: $('#Visible_Div').is(':visible'), Note: it's working with "display" but not with "visibility".

Step 1: Build custom div:

<div id="Visible_Div">Visible</div>


Step 2: Build function to set hide div if it visible, and show it if it's hide:

function Change_Visible_Div() {

    if ($('#Visible_Div').is(':visible')) {

        $('#Visible_Div').css({ "display": "none" });

        $('input[type=button]').val('Show div');

    }

    else {

        $('#Visible_Div').css({ "display": "" });

        $('input[type=button]').val('Hide div');

    }

}


Step 3: The main idea:
$('#Visible_Div').is(':visible')

Note: it's working with "display" but not with "visibility".

Complete code:

<html>

<head>

    <title>jQuery if div is visible</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    <script type="text/javascript">

        function Change_Visible_Div() {

            if ($('#Visible_Div').is(':visible')) {

                $('#Visible_Div').css({ "display": "none" });

                $('input[type=button]').val('Show div');

            }

            else {

                $('#Visible_Div').css({ "display": "" });

                $('input[type=button]').val('Hide div');

            }

        }

    </script>

</head>

<body>

    <div>

        This is a tutorial about visible element

    </div>

    <div id="Visible_Div">Visible</div>

    <br />

    <input type="button" value="Hide div" onclick="Change_Visible_Div();" />

</body>

</html>


Result:



Tags

jquery

visible is