Twitter Bootstrap Question posted in

Thymeleaf with Bootstrap: collapse/ accordion Table – Twitter bootstrap

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.

I am trying to do this with the standard bootstrap mechanism with ‘data-toogle’ and ‘accordion’.

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.

    <table class="table table-striped table-hover">
        <thead>
                <th>Name</th>
                <th>Value</th>
        </thead>
        <tbody>
            <tr th:each="result: ${results}" th:attr="data-target='#accordion_'+${result.name}" data-toggle="collapse" class="accordion-toggle">
                    <td th:text="${result.name}"></td>
                    <td th:text="${result.value}"></td>
            </tr>

            <tr th:each="result: ${results}">
                    <td colspan="6" class="hiddenRow">
                        <div class="accordion-body collapse" th:id="'#accordion_'+${result.name}">there is nothing to see here (yet)
                        </div>
                    </td>
            </tr>
        </tbody>
    </table>

So there are different questions/ answer in here:

  1. Is there a way in Thymeleaf to print two rows per list item?
  2. Is there a better mechanism to have collapsable list items with Thymeleaf?
Tags:

2

Answers


  1. 0

    you can print two rows in Thymeleaf by using the th:block tag like this (not tested)

    <th:block th:each="result: ${results}">
    <tr th:attr="data-target='#accordion_'+${result.name}" data-toggle="collapse" class="accordion-toggle">
        <td th:text="${result.name}"></td>
        <td th:text="${result.value}"></td>
    </tr>
    <tr>
        <td colspan="6" class="hiddenRow">
            <div class="accordion-body collapse" th:id="'#accordion_'+${result.name}">there is nothing to see here (yet)</div>
        </td>
    </tr>
</th:block>
    Login or Signup to reply.
  2. 0

    The solution didn’t work for me until I removed the # from the id attribute, so the data targets <div> now looks like this:

    <div class="accordion-body collapse" th:id="'accordion_'+${result.name}">there is nothing to see here (yet)</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search