How to Create a Toggle to Show/Hide Divs in jQuery ?

Last Updated : 13 Jan, 2024

A toggle button acts like a switch to hide and show the HTML elements. If a toggle button is ON, it will show the div element. Otherwise, it will hide the element just like a switch, if it gets ON the supply will start, otherwise, it stops the supply. We can use the below approaches to create a toggle button in jQuery.

Table of Content

Using the hide() and show() methods
Using the toggle() method
Using the css() method

Using the hide() and show() methods

The hide() and show() methods are respectively used to hide and show an HTML element. We will use these methods to toggle the div element in jQuery.

Syntax:

$('element_selector').show();
$('element_selector').hide();

Example: The below code example is a practical implementation of the hide and show methods to create a toggle button to toggle a div.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        How to create canvas of the same
        size as a div in a grid?
    </title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: 100px;
            height: 100%;
            width: 100%;
            text-align: center;
        }
 
        .toggle-outer{
            height: 20px;
            width: 50px;
            border-radius: 20px;
            border: 1px solid #ccc;
            background-color: #f4f4f4;
            margin: auto;
            position: relative;
            transition: all 0.3s ease-in;
            cursor: pointer;
        }
 
        .toggle-outer.checked{
            background-color: blue;
        }
 
        .toggle-inner{
            height: 18px;
            width: 18px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            transition: all 0.3s ease-in;
        }
 
        .toggle-outer.checked .toggle-inner{
            left: 30px;
        }
 
        input[type="checkbox"]{
            display: none;
        }
 
        #toggleLabel{
            cursor: pointer;
        }
 
        #result{
            display: none;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Toggle the div element by clicking the below
            toggle button.
        </h3>
        <div class="toggle-outer">
            <div class="toggle-inner">
                <input type="checkbox" id="toggle">
            </div>
        </div>
        <label id="toggleLabel" for="toggle">
            ON
        </label>
        <div id="result">
            <h3>
                This is the div that toggles on click <br/> 
                to the above toggle button.
            </h3>
        </div>
    </div>
 
    <!-- jQuery CDN Link -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer">
    </script>
 
    <!-- Custom Script -->
    <script>
        $(document).ready(() => {
            $('.toggle-outer').click(function(){
                $(this).toggleClass('checked');
                const res = $('#result');
                if(res.css('display') === 'none'){
                    res.show(300);
                    $('#toggle').attr('checked', true);
                    $('#toggleLabel').text('OFF');
                }
                else{
                    res.hide(300);
                    $('#toggle').attr('checked', false);
                    $('#toggleLabel').text('ON')
                }
                 
            })
        });
    </script>
</body>
 
</html>

Output:

divToggleGIF

Using the toggle() method

We can use the toggle() method of jQuery to hide and show the div element.

Syntax:

$('element_selector').toggle();

Example: The below code example uses the toggle method to create a toggle button to toggle div element.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        How to create canvas of the same
        size as a div in a grid?
    </title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: 100px;
            height: 100%;
            width: 100%;
            text-align: center;
        }
 
        .toggle-outer{
            height: 20px;
            width: 50px;
            border-radius: 20px;
            border: 1px solid #ccc;
            background-color: #f4f4f4;
            margin: auto;
            position: relative;
            transition: all 0.3s ease-in;
            cursor: pointer;
        }
 
        .toggle-outer.checked{
            background-color: blue;
        }
 
        .toggle-inner{
            height: 18px;
            width: 18px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            transition: all 0.3s ease-in;
        }
 
        .toggle-outer.checked .toggle-inner{
            left: 30px;
        }
 
        input[type="checkbox"]{
            display: none;
        }
 
        #toggleLabel{
            cursor: pointer;
        }
 
        #result{
            display: none;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Toggle the div element by clicking the below
            toggle button.
        </h3>
        <div class="toggle-outer">
            <div class="toggle-inner">
                <input type="checkbox" id="toggle">
            </div>
        </div>
        <label id="toggleLabel" for="toggle">
            ON
        </label>
        <div id="result">
            <h3>
                This is the div that toggles on click <br/> 
                to the above toggle button.
            </h3>
        </div>
    </div>
 
    <!-- jQuery CDN Link -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer">
    </script>
 
    <!-- Custom Script -->
    <script>
        $(document).ready(() => {
            $('.toggle-outer').click(function(){
                $(this).toggleClass('checked');
                const res = $('#result');
                if(res.css('display') === 'none'){
                    $('#toggle').attr('checked', true);
                    $('#toggleLabel').text('OFF');
                }
                else{
                    $('#toggle').attr('checked', false);
                    $('#toggleLabel').text('ON')
                }
                res.toggle();                
            })
        });
    </script>
</body>
 
</html>

Output:

divToggleGIF

Using the css() method

The css() method be used to hide and show a div by passing the display property with block and none values as parameters according to the current condition.

Syntax:

$('elemen_selector').css('display', 'none');
$('elemen_selector').css('display', 'block');

Example: The below code example implements the css() method to toggle the div element through toggle button.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        How to create canvas of the same
        size as a div in a grid?
    </title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: 100px;
            height: 100%;
            width: 100%;
            text-align: center;
        }
 
        .toggle-outer{
            height: 20px;
            width: 50px;
            border-radius: 20px;
            border: 1px solid #ccc;
            background-color: #f4f4f4;
            margin: auto;
            position: relative;
            transition: all 0.3s ease-in;
            cursor: pointer;
        }
 
        .toggle-outer.checked{
            background-color: blue;
        }
 
        .toggle-inner{
            height: 18px;
            width: 18px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            transition: all 0.3s ease-in;
        }
 
        .toggle-outer.checked .toggle-inner{
            left: 30px;
        }
 
        input[type="checkbox"]{
            display: none;
        }
 
        #toggleLabel{
            cursor: pointer;
        }
 
        #result{
            display: none;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Toggle the div element by clicking the below
            toggle button.
        </h3>
        <div class="toggle-outer">
            <div class="toggle-inner">
                <input type="checkbox" id="toggle">
            </div>
        </div>
        <label id="toggleLabel" for="toggle">
            ON
        </label>
        <div id="result">
            <h3>
                This is the div that toggles on click <br/> 
                to the above toggle button.
            </h3>
        </div>
    </div>
 
    <!-- jQuery CDN Link -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer">
    </script>
 
    <!-- Custom Script -->
    <script>
        $(document).ready(() => {
            $('.toggle-outer').click(function(){
                $(this).toggleClass('checked');
                const res = $('#result');
                if(res.css('display') === 'none'){
                    $('#toggle').attr('checked', true);
                    $('#toggleLabel').text('OFF');
                    res.css('display', 'block');
                }
                else{
                    $('#toggle').attr('checked', false);
                    $('#toggleLabel').text('ON');
                    res.css('display', 'none');
                }              
            })
        });
    </script>
</body>
 
</html>

How to Create a Toggle to Show/Hide Divs in jQuery ?

Using the hide() and show() methods

Syntax:

HTML

Using the toggle() method

Syntax:

HTML

Using the css() method

Syntax:

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?