[FIXED] Spring Thymeleaf collapse table with th:id

Issue

I'm trying to make each table entry have a hidden row that can be expanded/collapsed, so I tried to assign th:id using iteration but this doesn't seem to be working. Everything is generated but the hidden row doesn't expand when the button is pressed.

Any idea why? Or are there any other solutions/workaround?

<tbody th:each="topic, iterStat : ${topics}">
    <tr>
        <td>
            <button data-toggle="collapse" data-th-target="'#demo' + ${iterStat.count}"> +</button>
        </td>
        <td th:text="${topic.getId()}"></td>
        <td th:text="${topic.getName()}"></td>
        <td th:text="${topic.getDescription()}"></td>
    </tr>
    <tr>
        <td colspan="6" class="hiddenRow">
            <div class="accordian-body collapse" th:id="'demo' + ${iterStat.count}"> Lorem ipsum</div>
        </td>
    </tr>
</tbody>

Solution

This data-th-target="'#demo' + ${iterStat.count}" will not work. Any custom attributes in Thymeleaf need to be defined as: th:attr="data-th-target=|#demo${iterStat.count}|"

Update:

The attribute should be data-target and not data-th-target

Answered By - MohamedSanaulla
Answer Checked By - David Marino (JavaFixing Volunteer)