jQuery - Toggle an element

27 Jan jQuery – Toggle an element

Posted at 19:12h in jQuery by Studyopedia Editorial Staff 0 Comments

To toggle an HTML element, create a button and set the toggle on it using the jQuery toggle() method. Before moving further, we’ve prepared a video tutorial on how to toggle an element on a web page with jQuery:

Example

In the below example, we will show and hide the <p> element i.e. toggle. Let us see the example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("h2").click(function(){
     $("p").toggle();
   });
});
</script>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Toggle Text</h2>
<p>This is demo text</p>
 
</body>
</html>

Output

Toggle an element jQuery