CODEWITHSUNDEEP
javascriptknockout.js
Capuchin
Capuchin

Reputation: 3755

Knockout.js: Accordion/ collapse element without jQuery UI

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>

Upvotes: 0

Views: 832

Answers (1)

Tomalak
Tomalak

Reputation: 338128

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.

Upvotes: 3

Related Questions