How do I create a simple knockout accordion without jQuery UI?
The only examples that exist seem to have jquery Ui with them.
Example HTML:
<div class="alert alert-warning alert-detailed">
<span>Header</span>
<a title="Open detailed description" class="right toggle-details"><i class="fa fa-angle-double-down"></i> View details</a>
<p>Content
<a title="Dismiss alert" class="right dismiss-alert"><i class="fa fa-trash"></i> Dismiss</a>
</p>
Simplest implementation:
function Accordion(items, openIndex) {
var self = this;
self.items = ko.observableArray(items);
self.openItem = ko.observable(items[openIndex]);
}
var items = [
{header: "Item 1", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
{header: "Item 2", content: "Mauris at metus eget eros ultrices lobortis."},
{header: "Item 3", content: "Nunc lorem elit, facilisis in ante vitae, viverra pretium tortor."}
];
ko.applyBindings( new Accordion(items, 1) );ul.accordion {
padding-left: 0;
list-style: none;
border-top: 1px solid silver;
}
ul.accordion > li {
padding: 5px;
border-bottom: 1px solid silver;
}
ul.accordion > li > .content {
display: none;
}
ul.accordion > li > .header {
cursor: pointer;
font-weight: bold;
}
ul.accordion > li.accordion-open > .header {
cursor: auto;
}
ul.accordion > li.accordion-open > .content {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul class="accordion" data-bind="foreach: items">
<li data-bind="css: {'accordion-open': $data === $parent.openItem()}, click: $parent.openItem">
<div class="header" data-bind="text: header"></div>
<div class="content" data-bind="text: content"></div>
</li>
</ul>You can go and knock yourself out with CSS animations if you want to.
