Как реализовать свертывание и расширение списка с помощью тимелина?

Question

У меня есть HashMap (называемый test) в следующем формате: HashMap<String,List<MyClass>>.

Я хотел бы показать элементы значения HashMap как расширяемые заголовки, под которыми вы можете найти информацию о каждом объекте списка.

У меня есть следующий код, но в расширенном списке я вижу только одну строку для каждого заголовка. На самом деле, элементы списка переопределяются следующим в for l oop.

<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>

Как мне исправить мой код?

Answer 1

Я только что обновил версии bootstrap и jquery до последней версии, и это сработало. Я наконец использовал следующие:

<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>

Answer 2

Делает ли это то, что вы хотите?

<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>