Question

I’m trying to add collapsible panel functionality to my knockout template.

Basically, I want to add an image to the header div, that when clicked toggles the image url (to show a “plus” or “minus” icon) and toggles the visibility of the following div.

My template (with the required bindings I hope) is below:

{{each $data}}
<div id="wrapper" class="option-wrapper group show">
    <div class="option-head group">
    <img data-bind="click: showDescription attr: { href: url }>
        <h3 data-bind="text: Name"></h3>
        <select class="option-select" data-bind="options: Values, optionsText: 'value', optionsValue: 'key', value: Selected" />
    </div>
    <div class="option-description" data-bind="visible: showDescription html: Description"></div>
</div>
{{/each}}

I’m just unsure how to tackle the viewmodel. Any help would be greatly appreciated.

Answer 1

Okay. First option: Do you really need knockout to control the panels and whether they are opened or closed? If not then you could consider just using knockout to render the content and then using something like the jQuery accordion to handle the panels opening and closing.

However, if that does not work in your scenario, I would do something along the lines of:

{{each $data}}
<div id="wrapper" class="option-wrapper group show">
    <div class="option-head group">
        <span data-bind="click: toggleDescription, css: { 'isOpen': showDescription, 'isClosed': !showDescription() }"></span>
        <h3 data-bind="text: Name"></h3>
        <select class="option-select" data-bind="options: Values, optionsText: 'value', optionsValue: 'key', value: Selected" />
    </div>
    <div class="option-description" data-bind="visible: showDescription, html: Description"></div>
</div>
{{/each}}

(Notice how I have changed the <img> to a <span>)

Add the following function to your view model:

toggleDescription: function() {
   viewModel.showDescription(!viewModel.showDescription());
}

And then define the css styles for the span:

.isOpen{ background-image: url(../images/open.gif); }  
.isClosed { background-image: url(../images/closed.gif); }  

I’m coding off the top of my head here but hopefully that should give you the gist on how to proceed.