save.bz
Search

JQuery - Toggle Hide Show Div On Click Event

4 weeks ago  •  702 views
JQuery - Toggle Hide Show Div 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 - NiceSnippets.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 NiceSnippets.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 - NiceSnippets.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 NiceSnippets.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>