Sortable Accordion Sections

Using the sortable interaction widget to allow the user to sort accordion sections.

HTML

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Section 1 content</p>
  </div>
  <h3>a Section 0.1</h3>
  <div>
    <p>a Section 0.1 content</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Section 3 content</p>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>Section 4 content</p>
  </div>
</div>

JavaScript

(function($) {

  $.widget("app.accordion", $.ui.accordion, {

    options: {
      sortable: false
    },

    _create: function() {

      this._super("_create");

      if (!this.options.sortable) {
        return;
      }

      this.headers.each(function() {
        $(this).next()
          .addBack()
          .wrapAll("<div/>");
      });

      this.element.sortable({
        axis: "y",
        handle: "h3",
        stop: function(event, ui) {
          ui.item.children("h3")
            .triggerHandler("focusout");
        }
      });

    },

    _destroy: function() {

      if (!this.options.sortable) {
        this._super("_destroy");
        return;
      }

      this.element.sortable("destroy");

      this.headers.each(function() {
        $(this).unwrap("<div/>");
      });

      this._super("_destroy");

    }

  });

})(jQuery);

$(function() {

  $("#accordion").accordion({
    sortable: true
  });

});