How to Show/Hide Html Elements with jQuery

In this post I am going to show you how to show or hide elements of a web page by using jQuery.

Create a new html file with your text editor and put below contents into it:

<!DOCTYPE html>
<html>
 <head>
  <title>jQuery Show/Hide Example</title>
 </head>
 <body>
  <h1 id="title">Hello World!</h1>
  <a href="#" id="hideit">Hide Title</a>
 </body>
</html>

Now suppose we want to hide the text ‘Hello World!’ when we click ‘Hide Title’ link. Lets see how to do that. If you take a look at the above HTML, you’ll notice that I have assigned id attributes to both <h1> and <a> elements. An id is a unique identifier for a particular DOM element in an HTML source. When implementing our show/hide functionality we’ll use these ids as jQuery selectors for targeting those elements from Javascript.

Now its time to get into the real work. We need to include jQuery library in our HTML page. Lets add below line of code just before the closing </body> tag which will include jQuery into our HTML page from Google CDN:

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

Okay. Having included jQuery in our HTML page now we can proceed to write the Javascript code that will hide ‘Hello World!’ title when we click on the ‘Hide Title’ link. To implement this first we need to attach a ‘click’ event handler to the ‘Hide Title’ link. So when the ‘click’ event occurs on the ‘Hide Title’ link, its event handler will hide the ‘Hello World!’ text. ‘Hello World!’ text is wrapped in an <h1> tag and ‘Hide Title’ text is wrapped in an <a> tag. Remember we assigned id attributes for each of those elements! Here we will be using those id attributes as jQuery selectors to target respective elements when we attach an event handler to <a> tag and when hiding the <h1> element.

Below code shows how you can attach ‘click’ event handler to <a> tag. Note how we’ve used the ID (‘hideit’) as the selector to target <a> element :

$('#hideit').click(function(){
   // hide Hello World!
});

This is how you can hide the ‘Hello World!’ title with jQuery’s hide() method. Again notice the use of ID (‘title’) as the element selector for <h1> tag:

$('#title').hide();

Now lets assemble all these pieces together by adding the following script block just below the line that you’ve added jQuery library earlier:

...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

   $('#hideit').click(function(){
   
      // hide Hello World!
      $('#title').hide();

   });

</script>
</body>
</html>

Now save and load your HTML page with the browser. You should see the title ‘Hello World!’ along with the link ‘Hide Title’. When you click on the link you’ll see the title getting disappears from the page. If so congratulations! You have learned how to hide an HTML element with jQuery and Javascript.

Here is the working jsfiddle

Okay. The title is hidden now. How can we get it back? Lets modify our code by adding a new link called ‘Show Title’ next to the ‘Hide Title’ link. Notice that we have set an id attribute ‘showit’ for this element:

...

<a href="#" id="hideit">Hide Title</a>
&nbsp;&nbsp;<a href="#" id="showit">Show Title</a>

...

Similar to the way we attached the click event handler to the ‘Hide Title’ link, now we need to attach another click event handler with the ‘Show Title’ link. This time though it will make the title visible by using jQuery’s show() method. See below:

   ...

   });

   $('#showit').click(function(){

      $('#title').show();

   });

Comments

So empty here ... leave a comment!

Leave a Reply

Your email address will not be published. Required fields are marked *

Sidebar



Do NOT follow this link or you will be banned from the site!