Does this do what you want it to do?

<tbody>
    <th:block th_each="element, iterStat  : ${test}">
        <tr>
            <td colspan="3" data-toggle="collapse" th:data-target="|.demo${iterStat.count}|" th_text="${element.key}" />
        </tr>

        <tr th_class="|accordian-body collapse demo${iterStat.count}|" th_each="anews : ${element.value}">
            <td th_text="''">Place name</td>
            <td th_text="${anews.first_point}" />
            <td th_text="${anews.second_point}" />
        </tr>
    </th:block>
</tbody>

I just updated the verisons of bootstrap and jquery to the latest one and it worked. I used finally the following ones:

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

I have a HashMap (called test) in the following format: HashMap<String,List<MyClass>>.

I would like to show the items of the HashMap value as expandable titles under which you can find the information of each object of the list.

I have the following code, but what I see in the expanded list is just one row per each title. Actually, the items of the list are overridden by the next one in the for loop.

<tbody>
  <tr th_each="element, iterStat  : ${test}">
    <td data-toggle="collapse" th_attr="data-target=|#demo${iterStat.count}|" th_text="${element.key}">keyvalue</td>

    <tr class="accordian-body collapse" th_id="'demo' + ${iterStat.count}" th_each="anews : ${element.value}">
      <td th_text="''">Place name</td>
      <td th_text="${anews.first_point}">First point</td>
      <td th_text="${anews.second_point}">Second point</td>
    </tr>
  </tr>
</tbody>

How should I correct my code?