Есть ли способ заставить каждый div сворачиваться отдельно?

Question

Для каждого вопроса из базы данных создается кнопка, при нажатии которой открывается только один ответ. Но вместо этого, когда вы нажимаете на любую из кнопок, все ответы открываются.

До сих пор я пытался изменить «свернуть» на «$ {question.id}», но мне кажется, что этоне работает таким образом.

<div class="card-columns">
    <#list questions as question>
        <div class="card border-light mb-3 bg-card">
            <div class="m-2">
                <p>
                    <button class="btn btn-info" type="button"
                            data-toggle="collapse"
                            data-target="#collapse"
                            aria-expanded="false"
                            aria-controls="collapse">
                        ${question.question}
                    </button>
                </p>
            </div>
            <div class="m-2">
                <div class="collapse" id="collapse">
                    <div class="card card-body border-info">
                        ${question.answer}
                    </div>
                </div>
            </div>

            <#else>
                There is no questions.
            </#list>
        </div>
</div>

Answer 1

Вам нужно изменить " collapse " на $ question.id в 2 строки: <button ... data-target="#collapse" и <div ... id="collapse"> ( id not class). Я не знаком с freemarker, поэтому не могу предоставить полное исправление.