Thursday, May 10, 2012

jQuery's Show and Hide

One simple way to add some quick functionality to your website is to use jQuery's show() and hide() commands.  You can easily toggle between content with very little code.  Take a look at the following example:

Content 1 Area

This is one set of content. Click the show or hide button above to make this blue area disappear and then reappear.

Here is the code I used for each button:

<button onclick="$('#content1').hide();">Hide Content 1 Area</button><button onclick="$('#content1').show();">Show Content 1 Area</button>

<div id='content1' style="background-color:blue;color:white;"><h1>Content 1 Area</h1>This is one set of content.  Click the show/hide button above to toggle between showing or hiding this area.</div>

As you can see, all you have to do it select the item you want to show or hide and call the show() or hide() function.

What ways could you think of to use show() and hide() in your scripts?

No comments:

Post a Comment