Bootstrap手风琴使用th：block折叠

Question

Hello i have a problem with print objects on website. I have a packets from DB and i want print them in to the Accordion collapse (example on Boostrap). Now i have all objects or any objects open on the website.

    <div id="accordion">
    <th:block th:each="packet: ${packet}">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapse" aria-controls="collapse" th:text="${packet.name}">
                    </button>
                </h5>
            </div>
            <div id="collapse" class="collapse show" aria-labelledby="heading" data-parent="#accordion">
                <div class="card-body" th:text="${packet.description}">
                </div>
            </div>
        </div>
    </th:block>
    </div>

Answer 1

It is a problem with the css classes you are using inside the block. Use show only to show the card you want and you have to use collapsed in the buttons inside collapsed cards. The following code will show all the items collapsed:

  <div id="accordion">
    <th:block th:each="packet: ${packet}">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse" aria-controls="collapse" th:text="${packet.name}">
                    </button>
                </h5>
            </div>
            <div id="collapse" class="collapse" aria-labelledby="heading" data-parent="#accordion">
                <div class="card-body" th:text="${packet.description}">
                </div>
            </div>
        </div>
    </th:block>
    </div>