title: Creating collapsible panels using Knockout JS in a template
body: <p>I'm trying to add collapsible panel functionality to my knockout template.</p>
  
  <p>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.</p>
  
  <p>My template (with the required bindings I hope) is below:</p>
  
  <pre><code>{{each $data}}
  &lt;div id="wrapper" class="option-wrapper group show"&gt;
      &lt;div class="option-head group"&gt;
      &lt;img data-bind="click: showDescription attr: { href: url }&gt;
          &lt;h3 data-bind="text: Name"&gt;&lt;/h3&gt;
          &lt;select class="option-select" data-bind="options: Values, optionsText: 'value', optionsValue: 'key', value: Selected" /&gt;
      &lt;/div&gt;
      &lt;div class="option-description" data-bind="visible: showDescription html: Description"&gt;&lt;/div&gt;
  &lt;/div&gt;
  {{/each}}
  </code></pre>
  
  <p>I'm just unsure how to tackle the viewmodel. Any help would be greatly appreciated.</p>