After developing a few websites that have content reveal and accordion scripts, I decided to take what I learned and write my own simple, very customizable content reveal script. Since the web has helped me so much with learning about jQuery, I wanted to share my code.
This script helps creates clean layouts where there is a lot of content. To see the final result, take a look at the demo at the bottom of this post.
The Javascript
First, download the jQuery library (I recommend the minified version since it is lightweight). Link the library to your page using the following code:
<script src="path-to-directory/jquery-1.4.min.js" type="text/javascript"></script>
- Be sure to change the path to the directory that you keep your jQuery library in.
Paste this code between the <head></head> tags; if you paste it into a seperate javascript file, remove the <script> opening and closing tags:
<script type="text/javascript">
$(document).ready(function() {
//expand all or hide all options
$('#tools a.expand').click(function() { $('#reveal .content').slideDown('slow'); $('#reveal .header a').addClass('active'); });
$('#tools a.hide').click(function() { $('#reveal .content').slideUp('slow'); $('#reveal .header a').removeClass('active'); });
//individual header click toggle
$('#reveal .header a').click(function(){
//collapse and remove active class, if the div is opened it will close
var activeHeader = $(this).hasClass('active');
$(this).removeClass('active').parent('div').next('.content').slideUp('slow');
//open the div if it is closed and add the active class
if(activeHeader==0)
{ $(this).addClass('active').parent('div').next('.content').slideDown('slow'); }
});
});
</script>
I color coded some of the classes that the script calls. If you want to change the class names be sure to also change the classes in both the HTML and CSS. I have the tags colored to match in the CSS and HTML code snippets. The code is also commented to explain what each part does.
The CSS
Paste this code between the <head></head> tags; if you paste it into a seperate css file, remove the <style> opening and closing tags:
<style type="text/css">
#reveal { color:#444; font-family:Arial, Helvetica, sans-serif; font-size:12px; width:300px; }
#reveal #tools { color:#39f; cursor:pointer; font-size:10px; margin-bottom:3px; text-align:right; }
#reveal .header { border:1px solid #999; cursor:pointer; margin-bottom:3px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:3px 0; }
#reveal .header a { background:url(path-to-directory/arrow-inactive.png) no-repeat right; color:#00aef0; display:block; margin:0 10px; }
#reveal .header a.active { background:url(path-to-directory/arrow-active.png) no-repeat right; }
#reveal .content { display:none; padding:10px; }
</style>
Most of this code is styling. Important parts of the CSS are in red font:
- cursor:pointer – Since there is no href tag, the links for Expand All, Hide All and the headers need the hand cursor
- display:none – The content is initially hidden from view to keep the layout clean.
Note: If you want the content to be revealed when the page loads, you can remove this property; however you will also want to add the active class to each header in the HTML otherwise the script will not work properly on the initial hit.
- background:url() – You may want to have an indicator on your header that lets the user know that there is more content. A basic graphic for that is an arrow that points to the right while inactive and down while active. Be sure to change the path to the directory that holds your background image. If you would like to use the arrows from the example, you can download them here and here.
The HTML
Paste this code inbtween the <html></html> tags where you want the content reveal to show up:
<div id="reveal">
<div id="tools">
<a class="expand">Expand All +</a>
<a class="hide">Hide All -</a>
</div>
<div class="header"><a>
Header One Toggle
</a></div>
<div class="content">
Content under the first header
</div>
<div class="header"><a>
Header Two Toggle
</a></div>
<div class="content">
Content under the second header
</div>
<div class="header"><a>
Header Three Toggle
</a></div>
<div class="content">
Content under the third header
</div>
</div>
To quickly explain what each part of the code is used for:
- reveal id – a container div for the code
- tools id – holds the Expand All and Hide All links
- header class – the header link for each content div
- content class – the content container (initially hidden on load of the page)
Demo
As long as all of the code is pasted in the correct areas of your page and you changed the directory paths to where the jQuery library and arrow images reside, then you should come up with the following result:
Donec accumsan laoreet tincidunt. Vestibulum semper dui et est pellentesque venenatis. Aliquam vel libero diam. Quisque elementum, mi sed rutrum dictum, tellus erat ullamcorper purus, eget gravida tortor metus ut nunc.
Donec accumsan laoreet tincidunt. Vestibulum semper dui et est pellentesque venenatis. Aliquam vel libero diam. Quisque elementum, mi sed rutrum dictum, tellus erat ullamcorper purus, eget gravida tortor metus ut nunc.
Donec accumsan laoreet tincidunt. Vestibulum semper dui et est pellentesque venenatis. Aliquam vel libero diam. Quisque elementum, mi sed rutrum dictum, tellus erat ullamcorper purus, eget gravida tortor metus ut nunc.
