106 lines
2.4 KiB
HTML
106 lines
2.4 KiB
HTML
#[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">▸</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]#
|