How Can I Use Toggle Method In JQuery With Example

Posted By Bajarangi soft , Posted On 12-10-2020

In Jquery we can use toggle method can perform between hiding and showing an element with the toggle() method.so today we discuss how to implement jquery with toggle method

How Can I Use Toggle Method In JQuery With Example

Shown elements are hidden and hidden elements are shown:
Step 1:Create index.html file and implement below code.

<button class="btn btn-success" id="hide">Toggle Me</button>
<p>Toggle between hide and show paragraph</p>
<p>This is a paragraph with little content.</p>

Step 2:Implement jquery to use toggle method to perform hide and show.

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").toggle();
        });
    });
</script>

Complete Code For Toggling Method In JQuery

<!DOCTYPE html>
<html>
<head>
    <title>How Can I Use Toggle Method In JQuery With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: darkolivegreen;
    }
</style>
<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h2 id="color" style="color: White">Use Toggle Method In JQuery</h2>
    </div>
    <br>
    <br>
    <div class="well">

        <button class="btn btn-success" id="hide">Toggle Me</button>
        <p>Toggle between hide and show paragraph</p>
        <p>This is a paragraph with little content.</p>

    </div>
</div>
</body>
</html>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").toggle();
        });
    });
</script>