Accordion Knockout Component based on Bootstrap.
It's using the latest knockout features that allow communication between components.
Download and insert to the page the knockout-accordion.min.js
script file.
<script src="knockout-accordion.min.js"></script>
Dependencies:
- Knockout 3.3.0 and above
- jQuery
- Bootstrap CSS (Optional)
A simple example of accordion with specified items count.
<ko-accordion>
<ko-accordion-item params="{ heading: 'Item 1' }">
Content
</ko-accordion-item>
<ko-accordion-item params="{ heading: 'Item 2' }">
Content
</ko-accordion-item>
</ko-accordion>
An example of accordion which items can be changed dynamically.
<ko-accordion>
<!-- ko foreach: $root.items -->
<ko-accordion-item params="{ heading: $data.name }">
<div data-bind="text: $parent.content"></div>
</ko-accordion-item>
<!-- /ko -->
</ko-accordion>
var viewModel = {
items: ko.observableArray([
{ name: 'Item 1', content: 'Content' },
{ name: 'Item 2', content: 'Content' }
])
};
ko.applyBindings(viewModel);
The following components are included in this library:
Parent component to contains the accordion items.
Selector: ko-accordion
Options:
Name | Type | Description |
---|---|---|
selectedIndex | number | KnockoutObservable<number> |
Defines the expanded item |
Options are available through the params
binding.
Collapsible panel with header and content.
Selector: ko-accordion-item
Options:
Name | Type | Description |
---|---|---|
heading | string | KnockoutObservable<string> |
Sets the text in the header |
Options are available through the params
binding.