title: Auto-generate Div Ids for Bootstrap Accordion Menu binding with Knockout js
body: <p>I am creating a side menu using bootstrap accordion collapse and making use of knockout js binding. My problem is in assigning the right HTML element ids for toggle and collapse purposes as required by bootstrap. I have though of using the $indexin knockout to autogenerate the id. But not coming right. See my code below and comments:</p>
  
  <pre><code>&lt;div id="content" style="font-size: 8.8pt"&gt;
      &lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&gt;
          &lt;div class="panel panel-default" id="news"&gt;
              &lt;div class="panel-heading" role="tab" id="headingOne" data-bind="foreach: accordionItems()"&gt;&lt;!--accordionItems is an observableArray with my accordion objects. Object has a header and a list of linkitems. Each linkItem object has linkText and url--&gt;
                  &lt;a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;&lt;!--want to do something like: href="#"+$index--&gt;
                      &lt;p class="panel-title" data-bind="text: nameHead"&gt;&lt;/p&gt;
                  &lt;/a&gt; &lt;!--binding a collapse header here.--&gt;
                  &lt;div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"&gt;&lt;!--want to autogenerate the id here using knockout for reference above--&gt;
                      &lt;ul class="Newsbar panel-body" data-bind="foreach: list"&gt;
                          &lt;li&gt;&lt;a data-bind="attr: { href: url }, text: linkText"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>