Simple JQuery Accordion

Simple JQuery Accordion

A very simple and basic accordion script. If you need an accordion style UI without extended features, this script is easy to integrate with your own project.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<style>

div.slides { padding:8px; width:25%;}

div.slides h3 { margin:4px 0px 0px 0px; height:24px; background-color:#D3D3D3; border:1px #d3d3d3 solid; -moz-border-radius:0.5ex; -webkit-border-radius:0.5ex; border-radius:0.5ex; padding:4px 8px 0px 8px; cursor:pointer; }

div.slides div.content { border:1px #d3d3d3 solid; -moz-border-radius:0.5ex; -webkit-border-radius:0.5ex; border-top:0px; padding:8px 4px 4px 4px; }

</style>

<div class="slides">

<h3>Header 1</h3>

<div class="content">

 example content 1

</div>

<h3>Header 2</h3>

<div class="content">

 example content 2

</div>

<h3>Header 3</h3>

<div class="content">

 example content 3

</div>

</div>

<script>

$("div.content").hide();

$("div.content:first").show();

$("h3").bind("click", function() {

if ( $(this).next().css("display") == 'none' ) {

  $("div.content").hide();

  $(this).next().slideDown(250);

}

});

</script>