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($){});
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]
