#[body]#
<div class="container-fluid h-100 d-flex flex-column pt-3">
    <h1 class="mb-4">Часто задаваемые вопросы</h1>

    <div id="faqAccordion" class="flex-grow-1 d-flex flex-column">
        {rows}
        {walker}
    </div>
</div>

<style>
    /* Вопрос */
    .faq-question {
        font-size: 22px;
        font-weight: 600;
        color: #333;
        padding: 20px 25px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border: 0;
        background: none;
        text-align: left;
    }

    /* Ответ: скролл внутри */
    .faq-answer {
        font-size: 19px;
        white-space: pre-wrap;
        padding: 20px 25px;
        overflow-y: auto;
    }

    /* Карточка */
    .faq-card {
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        margin-bottom: 15px;
    }

    /* Стрелка */
    .faq-arrow {
        transition: transform 0.25s ease;
        font-size: 22px;
    }

    .faq-arrow.rotate {
        transform: rotate(90deg);
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {

        $('#faqAccordion').on('show.bs.collapse', function(e){
            let arrow = $(e.target).prev('.card-header').find('.faq-arrow');
            arrow.addClass('rotate');
        });

        $('#faqAccordion').on('hide.bs.collapse', function(e){
            let arrow = $(e.target).prev('.card-header').find('.faq-arrow');
            arrow.removeClass('rotate');
        });

    });
</script>
#[!body]#


#[row]#
<div class="card faq-card">
    <div class="card-header p-0" id="heading{id}">
        <button class="faq-question"
                data-toggle="collapse"
                data-target="#collapse{id}"
                aria-expanded="false"
                aria-controls="collapse{id}">
            <span>{question_text}</span>
            <span class="faq-arrow">&#9656;</span>
        </button>
    </div>

    <div id="collapse{id}"
         class="collapse"
         aria-labelledby="heading{id}"
         data-parent="#faqAccordion">

        <div class="faq-answer">{answer_text}</div>
    </div>
</div>
#[!row]#


#[body_void]#
<h1 class="mb-4">Часто задаваемые вопросы</h1>
Пока вопросов нет.
#[!body_void]#


#[card]#
#[!card]#