Multiple Jquery-UI Accordions on One Page

I want to have multiple Jquery-UI accordions on the same page I assumed it would be as easy as changing the ID in the documentation to a class but only the first one shows up.

//Default accordion
$( ".accordion" ).accordion({
fillSpace: true,
collapsible: true
});

//Sortable accordion
var stop = false;
$( ".accordion-sort h3" ).click(function( event ) {
if ( stop ) {
    event.stopImmediatePropagation();
    event.preventDefault();
    stop = false;
 }
});
$( ".accordion-sort" ).accordion({
 fillSpace: 开发者_高级运维true,
 collapsible: true,
     header: "> div > h3",
     axis: "y",
 handle: "h3",
 stop: function() {
    stop = true;
 }
 });



<div class="accordion">
  <h3><a href="#">First header</a></h3>
  <div>First content</div>
  <h3><a href="#">Second header</a></h3>
  <div>Second content</div>
 </div>

<div class="accordion-sort">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
 </div>

Change your second accordion() call to:

$(".accordion-sort").accordion({
     fillSpace: true,
     collapsible: true,
     header: "> div > h3"
 });

And it works for me. axis, handle, and stop are not valid configuration options. You may be thinking of draggable()

(Tested with jQuery 1.6.4 and jQuery UI 1.8.16)