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

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.

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.