Alex Rivera | Logout

JQuery Nested Sortable Accordion

Asked 2012-02-08T23:33:16.590
8

I am using http://mjsarfatti.com/sandbox/nestedSortable/ Nested Sortables for JQuery. I want to make each nestable an accordion. I have gotten to the point where I have nested sortables and accordions; however, whenever I drag any of the sortables to the left, the whole application freezes.

Here is my JS (this runs fine):

$('ol.sortable').nestedSortable({
    disableNesting: 'no-nest',
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    maxLevels: 10,
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div'                   
});

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

Here is the html:

<section id="accordion"> 
    <ol class="sortable"> 
        <li id="list_1">
            <div>
                <h3><a href="#">Header</a></h3>
                <div>
                    <p>des fields.</p>
                </div>
        </div>
        <li id="list_2"><div>Item 2</div> 
        <ol> 
            <li id="list_3"><div>Sub Item 2.1</div> 
            <li id="list_4"><div>Sub Item 2.2</div> 
            <li id="list_5"><div>Sub Item 2.3</div> 
            <li id="list_6">
Edit
Report

1 Answer

-1

Something like this

<li id="list_1">
    <div class='test'>
        <div class='header'> Header</div>
        <div> Content of header 1</div>
        <div>
            <p>des fields.</p>
        </div>
    </div>
function loadTemplatesAccordion() {
    $(".test").accordion({
        icons: false,
        autoHeight: false,
        active: false,
        header: '.head',
        collapsible: true
    });
}
answered 2012-05-29T15:22:14.683

Your Answer