title: How can i use accordion to show collections documents?
body: <p>My requirement:<br>
  1. Get the data from the mongo collection and display into accordion<br>
  2. Set the active ID of the selected html accordion tag same as that of the document from collection.<br>
  3. Get the dropdown transition when we click in any one accordion entry in UI.<br>
  <strong>sample.html</strong></p>
  
  <pre><code>     {{#each listjobs}}
          &lt;button class="accordion"&gt;{{platform}}&lt;/button&gt;
          &lt;div class="panel"&gt;
              &lt;ul class="panel_elements"&gt;
                    &lt;li&gt;&lt;input type="submit" name="delete" value="Delete" /&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;input type="checkbox" name="abc" value="abc" /&gt;{{abc}}&lt;/li&gt;
                    &lt;li&gt;&lt;input type="checkbox" name="def" value="def" /&gt;{{def}}&lt;/li&gt;
                    &lt;li&gt;&lt;input type="checkbox" name="ghi" value="ghi" /&gt;{{ghi}}&lt;/li&gt;
                    &lt;li&gt;&lt;input type="submit" name="trigger" value="Trigger" /&gt;&lt;/li&gt;
                    &lt;li id="status"&gt;SUCCESS / FAIL&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      {{/each}}
  </code></pre>
  
  <p><strong>sample.css</strong></p>
  
  <pre><code>    button.accordion {
          background-color: #eee;
          color: #444;
          cursor: pointer;
          padding: 18px;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 15px;
          transition: 0.4s;
      }
  
      button.accordion.active, button.accordion:hover {
          background-color: #ccc;
          border: 1px solid black;
      }
  
      button.accordion:after {
          content: '\002B';
          color: #777;
          font-weight: bold;
          float: right;
          margin-left: 5px;
      }
  
      button.accordion.active:after {
          content: "\2212";
      }
  
      div.panel {
          padding: 0 18px;
          background-color: white;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
      }
      ul.panel_elements{
        list-style-type:none;
      }
      ul.panel_elements li{
        display:inline-block;
  
      }
  </code></pre>
  
  <p><strong>sample.js</strong></p>
  
  <pre><code>Template.trigger.events({
      'click .accordion':function(){
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.maxHeight){
            panel.style.maxHeight = null;
          } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
          } 
      },
  
  });
  </code></pre>
  
  <p>The list is displayed by fetching entry mongo collections, but when i click on the job in UI the accordion drop-down doesn't comes up!!.<br>
  Can anyone please help me to solve this? or is there any other way to do this?</p>