Clifton's Exclusive VIP Blogging Strategies
Your name and email address will never be sold.

jQuery Toggle / Accordion Markup

This script demonstrates a simple toggle list HTML/CSS/Javascript to create a horizontal accordion effect. This can be handy for sidebar/widget style navigation, frequently asked questions, etc. Of course, load the jQuery library before calling jQuery(function($){});

Demo

CSS

[css]

#toggle .toggle {display:none;font-size:13px;background-color:#EEE;color:#666;text-shadow:1px 1px rgba(255,255,255,0.9)}
#toggle .toggler {cursor:pointer;font-size:18px;background-color:#B10000;color:#FFF;text-shadow:1px 1px rgba(0,0,0,0.9);}
#toggle div {margin:0;padding:8px;font-family:Arial, Helvetica, sans-serif;}

[/css]

jQuery

[code lang="js"]
jQuery(function($){
$('#toggle .toggler').click(function(){
$(this).next().toggle();
});
});
[/code]

HTML

[code lang="html"]
<div id="toggle">
<div class="toggler">Toggle 1</div>
<div class="toggle">Show for toggle one</div>
<div class="toggler">Toggle 2</div>
<div class="toggle">Show for toggle two</div>
</div>
[/code]

About Clifton Hatfield

He fell in love with the WordPress Publishing Platform and has been creating themes and plugins for it ever since. He is the kind of guy that can read code better than he can read a book. Often, you can find him hunched over a keyboard delivering his magic. He likes cold pizza, walking on moving sidewalks, and Indiana Jones.
0 comments