Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
How to show hide div in jquery in Jquery functions of JQuery Examples
2577 Views
Note 
toggle() function used for both show and hide ,this work respectively.In Example 1: explained about how to show and hide element when click some element.

Related topics :

show() function used to show the hidden element.
In Example 2: explained about how to show element when click some element.

hide() function used to hide the shown element.
In Example 3: explained about how to hide element when click some element.
Example: 1 How to show and hide element when click some element
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".one").click(function () {
                $(".two").toggle();
            });
            $(".three").click(function () {
                $(".four").toggle();
            });
        });
    </script>
    <style type="text/css">
        .two,
        .four {
            display: none;
        }
    </style>
</head>

<body>
    <div class="one">one-Click here to show next number</div>
    <div class="two">two</div>
    <div class="three">three-Click here to show next number</div>
    <div class="four">four</div>
</body>

</html>
Example: 2 How to show element when click some element
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".one").click(function () {
                $(".two").show();
            });
            $(".three").click(function () {
                $(".four").show();
            });
        });
    </script>
    <style type="text/css">
        .two,
        .four {
            display: none;
        }
    </style>
</head>

<body>
    <div class="one">one-Click here to show next number</div>
    <div class="two">two</div>
    <div class="three">three-Click here to show next number</div>
    <div class="four">four</div>
</body>

</html>
Example: 1 Demo 
Example: 2 Demo  
Example: 3 How to hide element when click some element
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".one").click(function () {
                $(".two").hide();
            });
            $(".three").click(function () {
                $(".four").hide();
            });
        });
    </script>
</head>

<body>
    <div class="one">one-Click here to hide next number</div>
    <div class="two">two</div>
    <div class="three">three-Click here to hide next number</div>
    <div class="four">four</div>
</body>

</html>
Example: 3 Demo  
Previous Topics
Previous lessons of current book.
Best Lessons of "JQuery Examples"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details