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 jQuery toggle() method with Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery toggle method </title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btntoggle").click(function () {
                $("p").toggle();
            });
        });
    </script>
</head>
<body>
    <input id="btntoggle" type="button" value="toggle me" />
    <p class="paragraph">
        Hello SQL Tutorials Point
    </p>
    <style>
        .paragraph {
            width: 400px;
            text-align: justify;
            height: 100px;
            background-color: #dad420;
            text-align: center;
            padding-top: 36px;
            font-size: 18px;
            color: #000;
            margin-top: 10px;
        }
    </style>
</body>
</html>

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 Example of  jQuery  toggle() Method (with speed  parameter)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery toggle method </title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnfasttoggle").click(function () {
                $("p.fast").toggle("fast");
            });
            $("#btntoggleslow").click(function () {
                $("p.slow").toggle("slow");
            });
        });
 
    </script>
</head>
<body>
    <table>
        <tr>
            <td><input id="btntoggleslow" type="button" value="toggle Slow" /></td>
            <td><input id="btnfasttoggle" type="button" value="toggle Fast" /></td>
        </tr>
        <tr>
            <td>
                <p class="slow">
                    <b>slow toggle method</b>
                </p>
            </td>
            <td>
                <p class="fast">
                    <b>fast toggle method</b>
                </p>
            </td>
        </tr>
    </table>
    <style>
        .fast {
            width: 200px;
            text-align: justify;
            border: 1px solid #000;
            margin-right: 15px;
            height: 200px;
            background-color: #dad420;
        }
 
        .slow {
            width: 200px;
            text-align: center;
            border: 1px solid #000;
            float: left;
            background-color: #dad420;
            margin-right: 15px;
            height: 200px;
        }
    </style>
</body>
</html>

 

 

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

Let’s see Example of jQuery toggle () Method (with callback function)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery toggle Method </title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btntoggle").click(function () {
                $("p").toggle(".paragraph", function () {
                    alert("The toggle effect is completed.");
                });
            });
        });
    </script>
</head>
<body>
    <input id="btntoggle" type="button" value="toggle me" />
    <p class="paragraph">
        <b>Call back paragraph</b>
    </p>
    <style>
        .paragraph {
            width: 200px;
            text-align: center;
            border: 1px solid #000;
            background-color: #dad420;
            margin-right: 15px;
            height: 200px;
            margin-top: 10px;
        }
    </style>
 
</body>
</html>

 

Thanks for reading this article.

 

 Let's check live example

comments


Leave a comment

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

You may also like