title: Thymeleaf with Bootstrap: collapse/ accordion Table
body: <p>I am tryring to create a table from a list of elements with Thymeleaf and Twitter Bootstrap.
  The table rows should each be exapandable by click.</p>
  
  <p>I am trying to do this with the standard bootstrap mechanism with 'data-toogle' and 'accordion'.</p>
  
  <p>The problem is that I cannot get Thymeleaf to print two rows of each entry from the list. The best I could archive is the following, with the problem that opening bodies are under the original table.</p>
  
  <pre><code>    &lt;table class="table table-striped table-hover"&gt;
          &lt;thead&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Value&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr th:each="result: ${results}" th:attr="data-target='#accordion_'+${result.name}" data-toggle="collapse" class="accordion-toggle"&gt;
                      &lt;td th:text="${result.name}"&gt;&lt;/td&gt;
                      &lt;td th:text="${result.value}"&gt;&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr th:each="result: ${results}"&gt;
                      &lt;td colspan="6" class="hiddenRow"&gt;
                          &lt;div class="accordion-body collapse" th:id="'#accordion_'+${result.name}"&gt;there is nothing to see here (yet)
                          &lt;/div&gt;
                      &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>So there are different questions/ answer in here:</p>
  
  <ol>
  <li>Is there a way in Thymeleaf to print two rows per list item?</li>
  <li>Is there a better mechanism to have collapsable list items with Thymeleaf?</li>
  </ol>