Thymeleaf with Bootstrap: collapse/ accordion Table
<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>