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

Clifton is the kind of guy that can read code better than he can read a book and prefers it that way. He likes cold pizza, moving sidewalks, and Indiana Jones. Clifton co-founded Internet Lifestyle Network from his home office in 2012 and he believes that true leadership is to inspire.
0 comments