На многих лендингах и онлайн - магазинах можно увидеть блок вопросов и ответов для клиентов. Чаще всего он расположен в самом низу страницы и служит для того, чтобы закрывать "боли" покупателя: давать ответы на самые распространенные вопросы о товаре или услуге. Например, по доставке, оплате, регистрации на сайте и пр. К тому же такой виджет значительно снимает нагрузку с онлайн - консультанта, если он есть. Т. к. всю нужную информацию клиент может получить из этого блока FAQ (с англ. frequently asked questions - самые задаваемые вопросы).
Чаще всего этот блок работает так: при нажатии на вопрос клиенту показывается ответ, при повторном нажатии текст скрывается. На wordpress такой функционал можно быстро сделать с помощью плагина, например Accordion & FAQ. Но в этой статье рассмотрим, как сделать блок вопросов на сайте без плагинов, смс и регистраций, используя лишь css, html и jquery.
1HTML разметка блока
<div class="question">
<p>вопрос 1<span>V</span></p>
<div class="content">ответ на вопрос</div>
</div>
<div class="question">
<p>вопрос 2<span>V</span></p>
<div class="content">ответ на вопрос</div>
</div>
</div>
2CSS код
.question{
padding: 5px 20px;
border-bottom: 1px solid #d1d1d1;
max-width: 100%;
margin-bottom: 10px;
width: 100%;
text-align: left;
font-size: 19px;
font-weight: 600;
}
.question span {
float: right;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid;
width: 30px;
height: 30px;
}
.content {
text-align: left;
font-size: 14px;
font-weight: 300;
display:none
}
</style>
3Jquery скрипт (не забываем сначала подключить jquery библиотеку)
$('.question').click(function() {
$(this).find('.content').toggle(200); //скрытие, показ ответа
$(this).find('span').css('transform', 'rotate(0deg)'); //поворот стрелки
if ($(this).hasClass('open')) {
$(this).removeClass('open');
} else {
$(this).addClass('open');
$(this).find('span').css('transform', 'rotate(180deg)'); //поворот стрелки
};
});
</script>
Демо
вопрос 1V
вопрос 2V
Чтобы увеличить количество вопросов, нужно полностью скопипастить блок question необходимое количество раз.
