Делаем раздел Ответ-Вопрос на основе аккордеона BootStrap

На практике, была задача сделать раздел вопрос-ответ с несколькими разделами, подразделами, и что бы была возможность добавлять в этот раздел контент, не правя код, а прямо непосредственно из под админки ModX.

Для осуществления я взял за основу элемент BootStrap "аккордеон". Приступим.

Для начала, мы в админке ModX сформируем страницу-контейнер, которая в себе будет содержать наши элементы, и которые можно будет редактировать, добавлять и удалять. Получиться для примера дерево элементов вот такого вида:

В основной странице создаем стили и код.

Код (символ "((" заменяем на две квадратные скобки)

<style>
/*СТИЛИ АККОРДИОНА В РАЗДЕЛЕ ВОПРОС-ОТВЕТ*/
#accordionSuperMain {
    width: 100%;}
#accordionSuperMain .card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #006dd633;
}
#accordionSuperMain .card {
    margin: 0 0 5px 0;
    border: 2px solid #006dd633;}/*#006dd6*/
#accordionSuperMain .btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem #ff8e30;}
#accordionSuperMain .btn-link {
    font-size: 22px;
    font-weight: 700;
    color: #006dd6;/*#000000*/
    text-decoration: none;}
    
.accordion-under-section {
    width: 100%!important;}
.accordion-under-section .card-header {
    padding: 0.75rem 1.25rem!important;
    margin-bottom: 0!important;
    background-color: #006dd633!important;
    border-bottom: 0!important;}
.accordion-under-section .card {
    margin: 0 0 5px 0!important;
    border: 0px solid #006dd633!important;}/*#006dd6*/
.accordion-under-section .btn.focus, .btn:focus {
    outline: 0!important;
    box-shadow: 0 0 0 0.2rem #ff8e30!important;}
.accordion-under-section .btn-link {
    font-size: 18px!important;
    font-weight: 700!important;
    color: #006dd6!important;/*#000000*/
    text-decoration: none!important;}
    
.accordion-questions .btn-link {
    font-size: 14px!important;
    font-weight: 700!important;
    color: #000000!important;
    text-decoration: none!important;}
.accordion-questions .card {
    border: 0px solid #006dd633!important;}/*#006dd6*/  
.accordion-questions .card-header {
    background-color: #f5e8dd!important;}/*#006dd633*/
.accordion-questions .card-body {
    -ms-flex: 1 1 auto!important;
    flex: 1 1 auto!important;
    min-height: 1px!important;
    padding: 1.25rem!important;
    font-size: 16px!important;
    line-height: 1.3!important;
    text-align: justify!important;}
</style>





<div class="container">
    <div class="row">
        <div class="col-12">
            <p>Часто задаваемые нам вопросы об услугах по охране труда и наши ответы на них:</p>
        </div>
    </div>
    
    <div class="accordion-block row">

    <div class="accordion" id="accordionSuperMain">
      
    ((!pdoResources? 
    &parents=`52`
    &depth=`0`
    &includeTVs=`` 
    &tpl=`faq_section`))

    </div>

    </div>
</div>

Далее создаем чанк, который будет отвечать за основные секции раздела.

Чанк "faq_section" (символ "((" заменяем на две квадратные скобки)

    <div class="card">
        <div class="card-header" id="heading((+id))">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse((+id))" aria-expanded="True" aria-controls="collapse((+id))">
                ((+pagetitle))
                </button>
            </h2>
        </div>
    
        <div id="collapse((+id))" class="collapse" aria-labelledby="heading((+id))" data-parent="#accordionSuperMain">
        <div class="card-body">
                 
                <div class="accordion accordion-under-section" id="accordionUnderSection((+id))"> 
                
                ((!pdoResources? 
                &parents=``
                &depth=`0`
                &includeTVs=`` 
                &tpl=`faq_under_section`))
                
                </div>
                 
        </div>
        </div>
    </div>

Далее создаем чанк подразделов.

Чанк "faq_under_section" (символ "((" заменяем на две квадратные скобки)

    <div class="card">
        <div class="card-header" id="heading((+id))">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse((+id))" aria-expanded="True" aria-controls="collapse((+id))">
                ((+pagetitle))
                </button>
            </h2>
        </div>
    
        <div id="collapse((+id))" class="collapse" aria-labelledby="heading((+id))" data-parent="#accordionUnderSection((+parent))">
        <div class="card-body">
            <div class="accordion accordion-questions" id="accordionQuestions((+id))">
                 
                 ((!pdoResources? 
                &parents=`((+id))`
                &depth=`0`
                &includeTVs=`` 
                &includeContent=`1`
                &tpl=`faq_under_section_item`))
                 
            </div>
        </div>
        </div>
    </div>

 И в финале, создаем чанк, который будет отвечать за сами вопросы с ответами.

Чанк "faq_under_section_item" (символ "((" заменяем на две квадратные скобки)

    <div class="card">
        <div class="card-header" id="heading((+id))">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse((+id))" aria-expanded="True" aria-controls="collapse((+id))">
                ((+pagetitle))
                </button>
            </h2>
        </div>
    
        <div id="collapse((+id))" class="collapse" aria-labelledby="heading((+id))" data-parent="#accordionQuestions((+parent))">
        <div class="card-body">
                ((+content))
        </div>
        </div>
    </div>

По аналогии все это возможно осуществить и на других CMS.