I am very new to jQuery but have found an accordion widget and it works for the most part. My question is: is it possible to have more than one accordion per page? I have several lists that should be visually separated, and each of them should be its own stand-alone accordion.
Here is my code:
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
collapsible: true,
header: "h3"
});
});
</script>
<style>
.demoHeaders { margin-top: 2em; }
</style>
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
I need to have a duplicate of the entire Divord Div with other content. How can i do this?
(Also - how can I set this so that the default view is that all divs breaks are collapsed? A folding property allows you to collapse all divs, not the default, accordion functions that always have one open but still display first one div open, then you need to click this div heading to close it.)