CODEWITHSUNDEEP
jqueryhtmljquery-uiaccordionjquery-ui-sortable
P. Prunesquallor
P. Prunesquallor

Reputation: 571

jQuery UI - accordion - sortable issue

I've encountered a problem with the sortable interaction of accordion. It should be possible to drag the <h3> elements and change their order. I tried to use the function from the official demo (here), but the sort doesn't "work".

Here is the CodePen for the full example: https://codepen.io/pprunesquallor/pen/awWREP

(My script does include other things (for icons, collapsing and resizing), but I wouldn't want to exclude those as I want to build on it.)

  $( function() {

    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };

    $( "#accordion" ).accordion({
        icons: icons,
        collapsible: true,
        heightStyle: "fill"
    });

    $( "#accordion-resizer" ).resizable({
      minHeight: 140,
      minWidth: 200,
      resize: function() {
        $( "#accordion" ).accordion( "refresh" );
      }
    });

  $("#accordion")
    .accordion({
      header: " > h3"
    })
    .sortable({
      axis: "y",
      handle: "h3",
      stop: function(event, ui) {
        ui.item.children("h3").triggerHandler("focusout");
        $(this).accordion("refresh");
      }
    });

  });

I found a similar problem here by another user, his issue was not enclosing the <h3> and <p> elements inside of an additional <div> so I'm assuming this also has to do with "> div > h3" and my HTML, but I tried all combinations and none worked...

Thanks in advance.

Upvotes: 1

Views: 640

Answers (1)

Govind Samrow
Govind Samrow

Reputation: 10179

Just add your item as below, .group field missing:

   
  $( function() {

    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };

$("#accordion")
    .accordion({
      icons: icons,
      collapsible: true,
      heightStyle: "fill",
      header: "> div > h3"
    })
    .sortable({
      axis: "y",
      handle: "h3",
      stop: function(event, ui) {
        ui.item.children("h3").triggerHandler("focusout");
        $(this).accordion("refresh");
      }
    });
    $( "#accordion-resizer" ).resizable({
      minHeight: 140,
      minWidth: 200,
      resize: function() {
        $( "#accordion" ).accordion( "refresh" );
      }
    });

  

  });
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<body>

  <div id="accordion-resizer" class="ui-widget-content">
    <div id="accordion">
      <div class="group">
        <h3>I'm open by default</h3>
        <div>
          <p>
            One
          </p>
        </div>
      </div>
      <div class="group">
        <h3>Open me!</h3>
        <div>
          <p>
            Two
          </p>
        </div>
      </div>
      <div class="group">
        <h3>Open me, you won't regret it!</h3>
        <div>
          <p>
            Three
          </p>
        </div>
      </div>
      <div class="group">
        <h3>I'm the one you're looking for!!</h3>
        <div>
          <p>
            JK, nothing in here
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions