jQuery UI accordion that keeps multiple sections open?

Walker picture Walker · Aug 13, 2010 · Viewed 125.4k times · Source

I may be an idiot, but how do you keep multiple sections in jQuery UI's accordion open? The demos all have only one open at a time... I'm looking for a collapseable menu type system.

Answer

2upmedia picture 2upmedia · Apr 20, 2012

Pretty simple:

<script type="text/javascript">
    (function($) {
        $(function() {
            $("#accordion > div").accordion({ header: "h3", collapsible: true });
        })
    })(jQuery);
</script>

<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>