In this tutorial we will learn how to Hide and Show div using jQuery. For this we can use jQuery toggle() method which hides and show the HTML element on every execution.
Table of Contents
jQuery toggle() method
jQuery toggle() method toggles the hide and show methods of jQuery by hiding and showing HTML elements.
In this example toggle() method is used to hide and show div.
HTML Code
HTML Code is given below, in this code we have a div and a button tag.
<!DOCTYPE html>
<html>
<head>
<title>Hide and Show div jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.div
{
background-color: red;
padding: 50px 10px;
margin: 10px 0px;
}
</style>
</head>
<body>
<div class="div" id="div">This is div element.</div>
<button id="btn">Hide and Show</button>
<script src="script.js"></script>
</body>
</html>
JQuery Code
JQuery Code is given below, jQuery click() method is used to execute a function on click of a button tag.
Inside this function toggle() method will hide and show the div on every click event.
$('#div') is a jQuery id selector used to select the div.
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('#div').toggle();
});
});
</script>
Same example with jQuery class selector.
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('.div').toggle();
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To Hide and Show div onclick with jQuery.