Hide and show are most useful effect of jQuery. In this article I will show you how you can easily hide and show elements using jQuery.
jQuery Hide:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Hide</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#all").hide();
});
})
</script>
</head>
<body>
<input type="button" name="button" id="button" class="button" value="Click" />
<div id="all">I love my country</div>
</body>
</html>
To hide the element we have to use .hide() and the following code works for hide a element.
$(document).ready(function(){
$("#button").click(function(){
$("#all").hide();
});
})jQuery Show:
To show a element use the following code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Show</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#all").show();
});
})
</script>
</head>
<body>
<input type="button" name="button" id="button" class="button" value="Click" />
<div id="all">I love my country</div>
</body>
</html>
In this markup the following jQuery code works for show a hidden element. Actually the jQuery code is as follows:
$(document).ready(function(){
$("#button").click(function(){
$("#all").show();
});
})
To show and hide:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Hide and Show</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#all").toggle();
});
})
</script>
</head>
<body>
<input type="button" name="button" id="button" class="button" value="Click" />
<div id="all">I love my country</div>
</body>
</html>
Toggle() is most powerful function to hide a element or visible a hidden element. Use the following code to show and hide effect.
$(document).ready(function(){
$("#button").click(function(){
$("#all").toggle();
});
})To add transition effect during show and hide mention duration on milliseconds such as .hide(1500), .show(1500), .toggle(1500).