LearnFast.Ninja

jQuery show hide div on click using display none and show onclick

Create hidden div with id attribute and style attribute with display none. Write jQuery script that get id as parameter and execute the show function. Create a button and call the function using onclick event. Test the working example code.

Step 1: Create hidden div with id attribute and style attribute with display none. 

<div id="Div_1" style="display: none; background-color: #ffffdd; width: 300px;">

    I am div

<br />

    Now you can see me.

</div>

 
Step 2: Write jQuery script that get id as parameter and execute the show function. 

function Show_Div(Div_id) {

    if (false == $(Div_id).is(':visible')) {

        $(Div_id).show(250);

    }

    else {

        $(Div_id).hide(250);

    }

}

 
Step 3: Create a button and call the function using onclick event. 
<input type="button" value="Click me to show or hidden div" onclick="Show_Div(Div_1)" />
 
Working Example: 

<html>

<head>

    <title>jQuery show</title>

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

    <script type="text/javascript">

        function Show_Div(Div_id) {

            if (false == $(Div_id).is(':visible')) {

                $(Div_id).show(250);

            }

            else {

                $(Div_id).hide(250);

            }

        }

    </script>

</head>

<body>

    <br />

    <input type="button" value="Click me to show or hidden div" onclick="Show_Div(Div_1)" />

    <br />

    <br />

    <div id="Div_1" style="display: none; background-color: #ffffdd; width: 300px;">

        I am div

    <br />

        Now you can see me.

    </div>

</body>

</html>

 
Result: 


Tags

jquery

show hide