Question

I have currently been working on a web application which features a dynamically updating accordion inside a jScrollPane.

I am now trying to implement jQuery Sortable without luck.

Currently examples I have found require you to change the header tags of the accordion to “> div > h3” …where then sortable’s handler is the h3 tag.

When keeping the original headers of the accordion and trying to make sortable work, I can not seem to find any solution.

This far in the project, I can’t change the header of the accordion because a lot of the functionality will be broken and will require extensive tweaking.

Does anyone have any ideas on making this work?

Thanks,

David

EDIT: Here is the example code I tried to make work. I removed the header option in the accordion and played around with the sortable handler and the click action.

    var stop = false;
    $("#accordion h3").click(function(event) {
        if (stop) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });

    $("#accordion").accordion().sortable({
        axis: "y",
        handle: "h3",
        stop: function() {
            stop = true;
        }
    });

Answer 1

There are two major differences between your code (including what you have in the jsfiddle.net link) and the standard example on jQuery’s site. First (and probably what’s tripping you up), each accordion “member” is wrapped in its own div. That is, where you have a div designated as the accordion container, then h3, div, h3, div…, you need the accordion container and a container for each member (so accordion div > member divs > h3/content div).

The header option in the example is spelling out the structure I described. However, if you change the structure and leave out the container (which I believe sortable needs to define what should be drag/dropped), your accordion probably still works but now is not sortable.

Here’s a normal working example. The HTML:

<div id="accordion">
    <div>
        <h3><a href="#">Section 1</a></h3>
        <div>
            <p>
                Text.
            </p>
        </div>
    </div>
    <div>
        <h3><a href="#">Section 2</a></h3>
        <div>
            <p>
                Text.
            </p>
        </div>
    </div>
    <div>
        <h3><a href="#">Section 3</a></h3>
        <div>
            <p>
                Text.
            </p>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </div>
    </div>
    <div>
        <h3><a href="#">Section 4</a></h3>
        <div>
            <p>
                Text.
            </p>
            <p>
                Text.
            </p>
        </div>
    </div>
</div>

The JS:

var stop = false;
$("#accordion h3").click(function(event) {
    if (stop) {
        event.stopImmediatePropagation();
        event.preventDefault();
        stop = false;
    }
});
$("#accordion").accordion({
    header: "> div > h3"
    })
    .sortable({
    axis: "y",
    handle: "h3",
    stop: function() {
        stop = true;
    }
});

If you change the structure now (leaving in the “accordion member containers” for sortable), it should work fine. In this example, I removed the h3 tags and made the anchors inside the accordion trigger element. I also gave the trigger elements a distinct “handle” class to distinguish them from any anchors within the members (there’s undoubtedly a better way to use jQuery selectors to do this but I’m rusty and lazy):

<div id="accordion">
    <div>
        <a href="#" class="handle">Section 1</a>
        <div>
            <p>
                Text...
            </p>
        </div>
    </div>
    ...
</div>

Then I changed the JS to reflect this. The accordion settings designate the path (past the needed div container) to the anchor tag. The sortable settings use our special “a.handle” so only “handle” class anchor tags will act as the sortable’s handle:

var stop = false;
$("#accordion h3").click(function(event) {
    if (stop) {
        event.stopImmediatePropagation();
        event.preventDefault();
        stop = false;
    }
});
$("#accordion").accordion({
    header: "> div > a"
    })
    .sortable({
    axis: "y",
    handle: "a.handle",
    stop: function() {
        stop = true;
    }
});

Hope that helps.