Use the accordion parameter to group expanders into an accordion. When one expander is expanded, the others will collapse.
The accordion value should be an empty Knockout observable.
<div class="row">
<div data-bind="expander: {accordion: myAccordion}">
...
</div>
<div data-bind="expander: {accordion: myAccordion}">
...
</div>
<div data-bind="expander: {accordion: myAccordion}">
...
</div>
</div>
Sets the expand and collapse animation. Uses jQuery animations. Include jQuery UI for more advanced animations.
By default, animation is "swing" at 400ms.
<div class="demo" data-bind="expander: {animate: { duration: 1000, easing: 'easeOutBounce'}}">
...
</div>
Use collapsedHeight to specify how tall the content should be when in a collapsed state.
<div data-bind="expander: {collapsedHeight: 60}">
...
</div>
If the content is shorter than the collapsedHeight, the toggles do not show.
<div data-bind="expander: {collapsedHeight: 150}">
I'm small enough to fit and don't need toggles!
</div>
Instead of a fixed pixel height, you can also set the collapsed height to the top of an element inside the content. This is useful if you want to ensure that an entire element is visible and not partially cut-off.
If the element is not found, the entire content will display without toggles.
<div data-bind="expander: {collapsedHeight: 'li:nth-of-type(6)'}">
<ul>
<li>Eggs</li>
<li>Bananas</li>
<li>Corn dogs</li>
<li>Flour</li>
<li>Peaches</li>
<li>Butter</li>
<li>Raisins</li>
<li>Watermelon</li>
<li>Soy sauce</li>
<li>Mushrooms</li>
</ul>
</div>
<div data-bind="expander: {collapsedHeight: 'li:nth-of-type(15)'}">
<ul>
<li>Eggs</li>
<li>Bananas</li>
<li>Corn dogs</li>
<li>Flour</li>
<li>Peaches</li>
<li>Butter</li>
<li>Raisins</li>
<li>Watermelon</li>
<li>Soy sauce</li>
<li>Mushrooms</li>
</ul>
</div>
Tolerance is the number of pixels that the content height must exceed beyond collapsedHeight before toggles show. This is useful to prevent the toggles from showing just because the content is a few pixels taller than collapsedHeight and clicking the expand link wouldn't reveal anything useful.
By default, tolerance is 50 pixels, but you can override that to whatever you want.
In the examples below, the content height is 100 pixels and collapsedHeight is set to 95. With default tolerance, the toggles do not show because the content is less than 50 pixels over collapsedHeight; with zero tolerance, the toggles show and clicking them simply reveals the hidden 5 pixels of white space.
<div data-bind="expander: {collapsedHeight: 95}">
...
</div>
data-expander attributes are an optional way to mark elements inside the expander the expand control, collapse control, toggle control, the content block, and the toggle block. Essentially, this allows you to bind these behaviors without having to explicitly expose these actions through your view model.
Binds collapse action to click event. This element will be hidden when content is collapsed.
Mark an element inside the expander binding with data-expander-content to flag it as the content element to expand or collapse. By default, content inside the binding is content element, however, you can use this attribute to mark a sub-element as the content element.
Binds expand action to click event. This element will be hidden when content is expanded.
Binds toggle action to click event.
Parent element of the toggles. If collapsedHeight is used and not exceeded, this element will be hidden.
Determines if the contents initially show expanded or collapsed. If true, the contents will initially show expanded; if false, the contents initially show collapsed.
Accepts booleans and Knockout observable booleans. Passing a Knockout observable boolean is preferable if you want to be able to control expand and collapse actions by that observable.
<div data-bind="expander: {expanded: true}">
...
</div>
<div data-bind="expander: {expanded: false}">
...
</div>
If you use Knockout observable boolean for the expanded property, then you can control expand and collapse actions by that observable.
The expander listens for changes to the expander observable. When set to true, it will expand; when set to false, it will collapse.
<script type="text/javascript">
var viewModel = {
expanded: ko.observable(false),
expand: function () {
this.expanded(true);
},
collapse: function () {
this.expanded(false);
}
};
ko.applyBindings(viewModel);
</script>
<div data-bind="expander: {expanded: expanded}">
...
</div>
<a href="#" data-bind="click: expand, visible: !expanded()">Expand</a>
<a href="#" data-bind="click: collapse, visible: expanded()">Collapse</a>
You can use the expander extender to add the "expanded" field and "expand", "collapse", and "toggle" functions to your view model.
Pass true to initially expand the content; false to initially collapse the content.
<script type="text/javascript">
var viewModel = ko.observable({}).extend({expander: false});
ko.applyBindings(viewModel);
</script>
<div class="demo" data-bind="with: extenderExample">
<div data-bind="expander: {expanded: expanded}">
...
</div>
<a href="#" data-bind="click: expand, visible: !expanded()">Expand</a>
<a href="#" data-bind="click: collapse, visible: expanded()">Collapse</a>
</div>
Specifies a custom expander template.
The expander binding will transclude the contents of the expander element into the template content, inside data-expander-content tagged element.
For instance:
<div data-bind="expander: {template: 'tmpl-foo'}">
Foo Contents
</div>
<script id="tmpl-foo" type="text/html">
<div data-expander-content></div>
<div data-expander-toggles>
<a href="#" data-expander-expand>Expand</a>
<a href="#" data-expander-collapse>Collapse</a>
</div>
</script>
Will become:
<div data-bind="expander: {template: 'tmpl-foo'}">
<div data-expander-content>Foo Contents</div>
<div data-expander-toggles>
<a href="#" data-expander-expand>Expand</a>
<a href="#" data-expander-collapse>Collapse</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 top10">
<div data-bind="expander: {
template: {
name: 'tmpl-top-top10',
data: {title: 'Top 10 Cars'}
},
collapsedHeight: 100}">
<ol>
<li>Audi A6/S6/A7</li>
<li>BMW 3-/4-Series</li>
<li>Cadillac CTS</li>
<li>Chevrolet Corvette Stingray</li>
<li>Ford Fiesta ST</li>
<li>Honda Accord</li>
<li>Mazda 3</li>
<li>Mazda 6</li>
<li>Porsche Boxster/Cayman</li>
<li>Volkswagen Golf/GTI</li>
</ol>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 top10">
<div data-bind="expander: {
template: {
name: 'tmpl-top-top10',
data: {title: 'Top 10 Songs'}
},
collapsedHeight: 100}">
<ol>
<li>Rude</li>
<li>Fancy</li>
<li>Stay With Me</li>
<li>Am I Wrong</li>
<li>Problem</li>
<li>Match</li>
<li>Latch</li>
<li>All Of Me</li>
<li>Chandelier</li>
<li>Summer</li>
</ol>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 top10">
<div data-bind="expander: {
template: {
name: 'tmpl-top-top10',
data: {
title: 'Top 10 Movies'
}
},
collapsedHeight: 100}">
<ol>
<li>The Shawshank Redemption</li>
<li>The Godfather</li>
<li>The Godfather: Part II</li>
<li>The Dark Knight</li>
<li>Pulp Fiction</li>
<li>The Good, the Bad, and the Ugly</li>
<li>Schindler's List</li>
<li>12 Angry Men</li>
<li>The Lord of the Rings: The Return of the King</li>
<li>Fight Club</li>
</ol>
</div>
</div>
<script id="tmpl-top-top10" type="text/html">
<h3 class="top10title">
<span data-bind="text: title"></span>
<span class="pull-right" data-expander-toggles>
<a href="#" data-expander-toggle>
<i class="fa" data-bind="css: {'fa-plus-square': !expanded(), 'fa-minus-square': expanded()}"></i>
</a>
</span>
</h3>
<div data-expander-content></div>
</script>