JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<div id="accordion">
    <div class="group">
        <h3><a href="#">Section 1</a></h3>
        <div>
            <p>words</p>
        </div>
    </div>
    <div class="group">
        <h3><a href="#">Section 2</a></h3>
        <div>
            <p>words</p>
        </div>
    </div>
    <div class="group">
        <h3><a href="#">Section 3</a></h3>
        <div>
            <p>words</p>
        </div>
    </div>
    <div class="group">
        <h3><a href="#">Section 4</a></h3>
        <div>
            <p>words</p>
        </div>
    </div>
</div>

CSS

/* IE has layout issues when sorting (see #5413) */
.group { zoom: 1 }

JavaScript

$(function() {
    $("#accordion").accordion({
        header: "> div > h3"
    }).sortable({
        axis: "y",
        distance: 5,
        handle: "h3",
        stop: function(event, ui) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children("h3").triggerHandler("focusout");
        }
    });
});