jQueryUI accordion - can I have more than one per page?

I'm very new to jQuery, but have found the accordion widget and have it working for the most part. My question is, is it possible to have more than one accordion on a page? I have several lists that need to be visually separate, and each needs to be its own self-contained accordion.

Here's my code so far:

<script type="text/javascript"> 
    $(function(){

        // Accordion
        $("#accordion").accordion({
            collapsible: true,
            header: "h3"
        });

    });
</script> 
<style> 
.demoHeaders { margin-top: 2em; }
</style> 

<!-- Accordion --> 
<h2 class="demoHeaders">Accordion</h2> 
<div id="accord开发者_StackOverflowion"> 
    <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> 

What I need is to have a duplicate of the entire Accordion div with different content. How can I do this?

(Also - how can I set this so the default view is to have all the divs collapsed? The collapsible property allows all of the divs to be collapsed, instead of the default accordion functionality of always having one open, but it still initially displays with one div open; you then have to click that div's header to close it.)

Yes it's possible just repeat your Accordion markup, but rather than using an ID use a class.

<div class="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> 

Next change your jquery selector to use a class rather than an id.

$(".accordion").accordion({ collapsible: true, header: "h3" });

you can use random number for class in Java script and in HTML class