Sortable Accordion

by Asle Gundersby

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<p>Multi-select Drag</p>
<p>
    <kbd>Click</kbd> to select individual items<br />
    <kbd>Ctrl + Click</kbd> to select multiple items
</p>
<br />
<div>
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
</div>    
 
<hr>

<div id="accordion" class="ui-widget" data-bind="jqAccordion: { },template: { name: 'myTmpl', foreach: tasks,  afterAdd: function(elem){$(elem).trigger('valueChanged');} }">
</div>
<script type="text/html" id="myTmpl">
    <div data-bind="attr: {'id': 'Task' + TaskId}" class="ui-widget-header">
        <h3><b><span data-bind="text: TaskId"></span>: <span data-bind="text: TaskName"></span></b></h3>
        <p>
        
            <textarea name="Purpose" data-bind="value: Purpose"></textarea>
            <hr style="margin: 2px;" />
            <textarea name="Description" data-bind="value: Description"></textarea> 
       </p>
    </div>
</script>      
    
         <br><br>
<div>
    Sekvens:  <span id="sekvens"> This is the sequence</span>
</div>

CSS

ul {
    border:1px solid Black;
    width:200px;
    height:200px;
    display:inline-block;
    vertical-align:top
}
li {
    background-color:Azure;
    border-bottom:1px dotted Gray
}
li.selected {
    background-color:GoldenRod
}

JavaScript

ko.bindingHandlers.jqAccordion = {
    init: function (element, valueAccessor) {
        var options = valueAccessor();
        $(element).accordion(options);
        $(element).bind("valueChanged", function () {
            ko.bindingHandlers.jqAccordion.update(element, valueAccessor);
        });
    },
    update: function (element, valueAccessor) {
        var options = valueAccessor();
        $(element).accordion('destroy').accordion({
            header: "> div > h3",
            heightStyle: "content"
        });
    }
};


function Example() {
    this.tasks = [{
        TaskId: 1,
        TaskName: "Task1",
        Description: "Task1 Description",
        Purpose: "Horsing around"
    }, {
        TaskId: 2,
        TaskName: "Task2",
        Description: "Task2 Description",
        Purpose: "Cowing around"
    }];
}
ko.applyBindings(new Example());