title: adding accordion feature to divs
body: <p>I am having trouble how to properly apply an accordion feature to the divs i have. the divs is created from a foreach loop so there are multiple divs each will contain a div with contents so i will need to create and apply unique id so that each div could collapse properly. </p>
  
  <p>View:</p>
  
  <pre><code>&lt;div class="list_accordion_toggle icon-minus-sign" id="letter" data-bind="text: Letter"&gt;&lt;/div&gt;
      &lt;div class="hideThis smoke_hover"&gt;
          &lt;span class="h2"&gt;&lt;small data-bind="text: Name"&gt;&lt;/small&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So when i click on the div with id="letter" i would like to have the div with class="hideThis" hidden. </p>
  
  <p>Javascript for multiple divs with content to hide. </p>
  
  <pre><code>$(document).on('click', '.list_accordion_toggle', function (event) {
              var togglerArr = [];
              var contentArr = []; 
  
              $('.icon-minus-sign').each(function () {
                  togglerArr.push($(this));
              });
  
              $('.collapse').each(function () {
                  contentArr.push($(this));
              });
  
              for (var t = 0; t &lt; togglerArr.length; t++) {
                  togglerArr[t][0].dataset.target = "#UserList_" + t;
              }
  
              for (var c = 0; c &lt; contentArr.length; c++) {
                  contentArr[c][0].id = "#UserList_" + c;
              }
          })
  </code></pre>
  
  <p>How can i properly bind the accordion feature to the div?</p>