How to show/hide elements with jquery
JQuery

By Admin - June 21, 2017 12:04 am   1   729   0

If you want to create your website more attractive then you should definitely go to jquery because jquery has its own big library and we can use jquery library for free.The best thing is jquery is less code and its animation is so good. If you want to know how to Show/Hide div or other elements in jquery then read full article

Steps :

  • In JQuery, as you know .(dot) represents class and #(hash) represents ID and we use class in this code. For show elements in jQuery, code showing below :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show with JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".showClick").click(function(){
$(".ShowArea").show();
});
});
</script>
</head>
<body>
<p class="showClick">Test Text</p>
<p class="ShowArea" style="display:none;">
Text is hidden. Text is hidden. Text is hidden. Text is hidden. Text is hidden.
</p>
</body>
</html>


  • For hide elements in jQuery, code showing below :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show with JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".showClick").click(function(){
$(".ShowArea").hide();
});
});
</script>
</head>
<body>
<p class="showClick">Test Text</p>
<p class="ShowArea">
Text is hidden. Text is hidden. Text is hidden. Text is hidden. Text is hidden.
</p>
</body>
</html>


  • For perform both Show/Hide use this method :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Show with JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".showClick").click(function(){
$(".ShowArea").toggle();
});
});
</script>
</head>
<body>
<p class="showClick">Test Text</p>
<p class="ShowArea">
Text is hidden. Text is hidden. Text is hidden. Text is hidden. Text is hidden.
</p>
</body>
</html>


  • For better animation, you can use time for show elements. 1000 represents 1 second and now element will show in 1 second. This will make user attractive to your website.
$(".ShowArea").toggle(1000);





Comment