Introduction with JQUERY – Having Fun with hide() and show()

Guest Posts Paolo Nikko Nuñal

In the previous article we tackled about JQUERY and its event, this time around we are going to be using one of its coolest built in functions. If you have been following on our guide with JQUERY, you might be noticing that I have been using a lot of ".show()" and ".hide()" functions. In this tutorial you'll be learning more about them and JQUERY's other built-in function.

Having fun with .Show() and .Hide()


The JQUERY hide() function will hide any element and the JQUERY show() function shows / displays any elements that were hidden before.



Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here




Code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
       $("#btn-hide").click(function(){
           $("#division").hide(1000);
    });
</script>
</head>
<body>
<button type="button" id="btn-hide">Hide Me</button>
<div id="division">The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog</div>
</body>
</html>


Base from the code above, we are using a <div> tag with an id "#division". The hide button is bind with a click function that listens to any clicking event. So every time when it is clicked, it will automatically hide all the text found under the <div> with the id "#division". The 1000 value inside the hide() function is the delay, so that you can actually see how it disappears.

Another thing that you should know, about is the Toggle. Often times you see this in many websites that has this toggle feature, and one good example is Facebook. The setting that you can find on the upper-right with the cog icon will automatically hide or show the drop down depending on the situation of the element.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
       $("#btn-toggle").click(function(){
          $("#division").toggle(1000);
     });
</script>
</head>
<body>
<button type="button" id="btn-toggle">Toggle</button>
<div id="division">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
</body>
</html>


That's it! Pressing the Toggle button will either hide or show the elements found on the div magically without you having to bind another individual button for show or hide events.



Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here