Show & Hide Content jQuery Tutorial
There are numerous JavaScript tutorials that show you how to toggle (show/hide) a section of content. Many of these tutorials are excellent. However, something I’ve noticed about a lot of these tutorial’s and plugin’s, is some of them don’t degrade gracefully when JavaScript is disabled—meaning the content is completely hidden when JavaScript is turned-off (common with plugins such as Noscript for Firefox).
In my opinion, it is important to provide a good user–experience with or without JavaScript. The following tutorial shows you how to create a JavaScript show and hide section using jQuery—with show and hide buttons. When JavaScript is disabled, the content is automatically shown and the show and hide buttons are not rendered at all—avoiding the confusion of redundant buttons that do nothing when clicked.
Show & Hide Content with Open & Close Buttons
View the demo here, which includes code snippets.
Below is further instruction on where to place the code on your page:
1. Place the following code in the <head> section of your HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.example1').hide().before('<a href="#" id="open-example1" class="button">Open ↓</a>');
$('.example1').append('<a href="#close-example1" id="close-example1" class="button">Close ↑</a>');
$('a#open-example1').click(function() {
$('.example1').slideDown(1000);
return false;
});
$('a#close-example1').click(function() {
$('.example1').slideUp(1000);
return false;
});
});
</script>
2. Include the section of content you want to show and hide within the <body> section of the page, as shown below:
<div class="example1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis sagittis lectus. Curabitur quam arcu, adipiscing quis pretium in, pharetra eget dolor.</p> </div>
Show & Hide Content with Toggle Button
The code for this example is also shown on the demo page, and involves a very simple change to the JavaScript as follows:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>');
$('a#toggle-example2').click(function() {
$('.example2').slideToggle(1000);
return false;
});
});
</script>
Button Styling
You may want to include the CSS styles for the buttons shown on the demo page. This should be included in the <head> section of the page—above the JavaScript you have already inserted into the page. The code also includes styles for the example paragraphs of text. These styles can easily be adjusted to your liking. The CSS looks like this:
<style type="text/css">
.button{
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
background:#eee;
border:0;
color:#333;
cursor:pointer;
font-family:"Lucida Grande",Helvetica,Arial,Sans-Serif;
margin:0;padding:2px 4px;
text-decoration:none;
position:relative
}
.example1 p, .example2 p{
border:1px solid #eee;background:#eee;
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
width:400px;
padding:1em
}
</style>
Other Options
It’s really easy to tweak the JavaScript so that the animation of showing and hiding the paragraph of text is faster or slower. Currently the script is set to show and hide the paragraph in 1000ms. This can be tweaked by changing the value within the JavaScript, for example here: $('.example1').slideDown(1000);.
It is also possible to make the Open button fade out when it is clicked, and then fade back in when the close button is clicked. This can be done by using the following JavaScript instead of the snippet shown above for the first example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.example1').hide().before('<a href="#" id="open-example1" class="button">Open ↓</a>');
$('.example1').append('<a href="#" id="close-example1" class="button">Close ↑</a>');
$('a#open-example1').click(function() {
$('.example1').slideDown(1000);
$('#open-example1').fadeOut(500);
return false;
});
$('a#close-example1').click(function() {
$('.example1').slideUp(1000);
$('#open-example1').fadeIn(500)
return false;
});
});
</script>
I hope you find this tutorial useful—if you have any comments or suggestions for future tutorials please drop me a comment below.