Jquery Toggle hide show div on click event example
In this example, i will give you simple example of show and hide div on single button click event in jquery. we can toggle show hide div on click event. we can do it jquery toggle element on click example.
I will give you two example that will do it same thing with hide and show div or element by class or id on click event.
In first example we will use jquery toggle() for hide and show div. In second example we will do it manually hide and show div using text. so let's see both example.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Jquery Toggle hide show div on click event example - ItSolutionStuff.com</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.display-none{
display: none;
}
</style>
</head>
<body>
<button>Show</button>
<div id="example" class="display-none">
Example of ItSolutionStuff.com
</div>
<script type="text/javascript">
$("button").click(function(){
$("#example").toggleClass('display-none');
});
</script>
</body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Jquery Toggle hide show div on click event example - ItSolutionStuff.com</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<button>Show</button>
<div id="example" style="display: none;">
Example of ItSolutionStuff.com
</div>
<script type="text/javascript">
$("button").click(function(){
if ($(this).text() == "Show") {
$("#example").css('display', 'block');
$(this).text('Hide');
}else{
$("#example").css('display', 'none');
$(this).text('Show');
}
});
</script>
</body>
</html>
I hope it can help you...

Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- How to get selected radio button value in Jquery?
- How to get last element from array object in Javascript or JQuery?
- How to split string to array by comma using jquery?
- How to Remove Query String from URL using JQuery?
- Automatically Scroll to Bottom of Div JQuery Example
- Check and Uncheck All Checkbox using JQuery Example
- How to Allow Only One Checkbox Checked at a Time in JQuery?