Introduction:

In this article we will explain how to show or hide a html elements using jquery or What is toggle() method in jquery or why use toggle () method in jquery with example.

Description:

The jQuery toggle () method is used to hide or show the selected html elements. It simply set the inline style display:none or display:block for the selected elements. It shows the hidden elements and hides the shown element.

Let’s see simple Example:

jQuery  toggle () Method

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
    <title>Example of jQuery </title>
 
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnshow").click(function () {
                $("p").toggle();
            });
        });
 
    </script>
</head>
<body>
 
    <div>
        <input id="btnshow" type="button" value="toggle" />
    </div>
 
    <b>toggle paragraph</b>
 
    <p style="width: 400px;text-align: justify; padding:10px;">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
    </p>
 
</body>
</html>

 

OutPut:

 

 how to hide or show html elements using toggle in jquery

 

 

You can also specify the duration as speed  parameter for making the jQuery  toggle effect animated over a specified period of time. Durations can be specified either using one of the predefined string 'slow' or 'fast', or in a number of milliseconds, for greater precision; higher values indicate slower animations.

 

Let’s see simple Example:

jQuery  toggle () Method (with speed  parameter)

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
    <title>Example of jQuery </title>
 
    <script src="Scripts/jquery-1.8.2.min.js"></script>
 
    <script type="text/javascript">
 
        $(document).ready(function () {
            $("#fastshow").click(function () {
                $("p.fast").toggle("fast");
            });
            $("#slowshow").click(function () {
                $("p.slow").toggle("slow");
            });
        });
 
    </script>
</head>
<body>
    <div>
        <input id="fastshow" type="button" value="Fast show" />
 
        <input id="slowshow" type="button" value="Slow show" />
    </div>
 
    <b>toggle Fast</b>
 
    <p class="slow" style="width: 400px; text-align: justify;
      border: 2px solid #000; padding:10px;">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
    </p>
 
    <b>toggle Slow</b>
 
    <p class="fast" style="width: 400px; text-align: justify;
        border: 2px solid #000; padding: 10px;">
        Lorem Ipsum has been the industry's standard dummy text ever since the
        1500s, when an unknown printer took a galley of type and scrambled it to make a
        type.
    </p>
</body>
</html>

 

You can also specify the duration as speed parameter in a number of milliseconds like below:

 

    <script type="text/javascript"> 
        $(document).ready(function () {
            $("#fastshow").click(function () {
                $("p.fast").toggle(1000);
            });
            $("#slowshow").click(function () {
                $("p.slow").toggle(2000);
            });
        }); 
    </script>


OutPut:

 

 how to hide or show html elements using toggle in jquery

 

You can also specify a callback function to be executed after the toggle() method completes.

 

Let’s see simple Example:

  • jQuery  toggle() Method (with callback function)

 

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
    <title>Example of jQuery </title>
 
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnshow").click(function () {
                $("p").toggle("slow", function () {
                    // Code to be executed
                    alert("The show effect is completed.");
                });
            });
        });
 
    </script>
</head>
<body>
 
    <div>
        <input id="btnshow" type="button" value="toggle" />
    </div>
    <p style="width: 400px;text-align: justify; padding:10px; border:2px solid #ccc;">
 
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
 
    </p>
 
</body>
 
</html>

 

OutPut:

 how to hide or show html elements using toggle in jquery

 

I hope this article will help to you.

 


0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like