Jquery Toggle hide show div on click event example
In this post we will give you information about Jquery Toggle hide show div on click event example. Hear we will give you detail about Jquery Toggle hide show div on click event exampleAnd how to use it also give you demo for it if it is necessary.
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" >
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…
Hope this code and post will helped you for implement Jquery Toggle hide show div on click event example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs