jQuery UI accordion

https://groups.google.com/d/topic/knockoutjs/h97sy04PK10/discussion

by Tilwin Joy

HTML

<script src="http://knockoutjs.com/downloads/knockout-1.3.0beta.debug.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a>

        </li>
        <li><a href="#tabs-2">Proin dolor</a>

        </li>
    </ul>
    <div id="tabs-1">
        <ul id="sortable1" class="connectedSortable ui-helper-reset">
            <li class="ui-state-default">
                <input class="chbox" type="checkbox" />Item 1</li>
            <li class="ui-state-default">
                <input class="chbox" type="checkbox" />Item 2</li>
            <li class="ui-state-default">
                <input class="chbox" type="checkbox" />Item 3</li>
            <li class="ui-state-default">
                <input class="chbox" type="checkbox" />Item 4</li>
            <li class="ui-state-default">
                <input class="chbox" type="checkbox" />Item 5</li>
        </ul>
    </div>
    <div id="tabs-2">
        <ul id="sortable2" class="connectedSortable ui-helper-reset">
         
        </ul>
    </div>
</div>

CSS

#sortable1 li, #sortable2 li {
      margin: 0 5px 5px 5px;
      padding: 5px;
      font-size: 1.2em;
      width: 120px;
  }
  .chbox {
      margin-right:10px;
  }
  .selected {
      background:red !important;
  }
  .hidden {
      display:none;
  }

JavaScript

$('.connectedSortable').on('click', 'input', function () {
    $(this).parent().toggleClass('selected');
});
$("#sortable1, #sortable2").sortable({
    revert:0,
    helper: function (e, item) { //create custom helper
        if (!item.hasClass('selected')) item.addClass('selected');
        // clone selected items before hiding
        var elements = $('.selected').not('.ui-sortable-placeholder').clone();
        //hide selected items
        item.siblings('.selected').addClass('hidden');
        var helper = $('<ul/>');
        return helper.append(elements);
    },
    start: function (e, ui) {
        var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
        //store the selected items to item being dragged
        ui.item.data('items', elements);
    },
    update: function (e, ui) {
        //manually add the selected items before the one actually being dragged
        ui.item.before(ui.item.data('items'));
    },
    stop: function (e, ui) {
        //show the selected items after the operation
        ui.item.siblings('.selected').removeClass('hidden');
        //unselect since the operation is complete
        $('.selected').removeClass('selected');
        $(this).find('input:checked').prop('checked',false);
    }

}).disableSelection();
var $tabs = $("#tabs").tabs();
var $tab_items = $("ul:first li", $tabs).droppable({
    accept: "ul, .connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function (event, ui) {
        console.log(ui.draggable.data('items'));
        var $item = $(this);
        var $elements = ui.draggable.data('items');
        var $list = $($item.find("a").attr("href"))
            .find(".connectedSortable");
        $elements.show().hide('slow');
        ui.draggable.show().hide("slow", function () {
            $tabs.tabs("option", "active", $tab_items.index($item));
            $(this).appendTo($list).show("slow").before($elements.show("slow"));
            
        });
    }
});