This is just a small example of how you can use jQuery to make an effective show/hide button(s) on a page with a few lines of code. It will support multiple instances per page and use it with HTML markup, you don’t need to edit the Javascript every time you want to use it. It’s generic and re-usable code.
I have provided a download for the example at the bottom of the page; although all of the needed code is explained and shown further down in the article.
So, what’s it for? – The main reason for using something like this is to add effects to your web pages that the user can interact with; for example, you could show an ad on the page and allow the user to hide it by clicking a link. Or collapse and expand navigation boxes or content, there are many uses.
The full code to try this out is shown 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" xml:lang="en" lang="en">
<head>
<title>jQuery Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function(e){
var blnHide = $(this).attr('hide');
if (blnHide) {
var toHide = $(this).attr('toHide');
if ($(this).text() == 'Hide') {
$(toHide).toggle(500);
$(this).text('Show');
} else {
$(toHide).toggle(500);
$(this).text('Hide');
}
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="test2">
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of
Lorem Ipsum.</p>
</div>
<a href="#" hide=true toHide="#test2">Hide</a>
</div>
</body>
</html>
As you can see from above; it uses a very small amount of code and is easy to use. All you need to do is make sure the content you wish to hide is placed inside a DIV element and take a note of the ID. Create a normal HTML link outside of that DIV element and add the following properties; hide=true and toHide=”#divName” an example is shown below:
<a href="#" hide=true toHide="#test2">Hide</a>
The above HTML link will enable hiding and hide all of the content inside the #test2 DIV. The “Hide” will also be replaced with “Show” once clicked, which will show the hidden content again.
If you wish to change the speed, edit the javascript .toggle(500) line and increase or decrease the value.
It’s only a small example but it’s a useful one.
Thanks for this Steve, this is really helping me out.
Any chance you could show me how I could make the content hidden from the start?
Sorry, Ive managed to do that with
$(“#test2″).hide();
But now it says Hide instead of show and vice versa, and I cant seem to change that by simple switching the occurences in the code?
Wow, brain totally not functioning last night. Woke up with fresh eyes and fixed everything I needed! Cheers for this post and sorry for spamming the comments.
Hi Gareth,
No probs – Glad you got it sorted!
This code is a bit old and there are a few better ways to do it – You could use the callback parameter on .toggle() to check when the animation is complete and do the button changing stuff there instead of the large if statements.