Блок вопросов и ответов FAQ для сайта на html+jquery

14352

На многих лендингах и онлайн - магазинах можно увидеть блок вопросов и ответов для клиентов. Чаще всего он расположен в самом низу страницы и служит для того, чтобы закрывать "боли" покупателя: давать ответы на самые распространенные вопросы о товаре или услуге. Например, по доставке, оплате, регистрации на сайте и пр. К тому же такой виджет значительно снимает нагрузку с онлайн - консультанта, если он есть. Т. к. всю нужную информацию клиент может получить из этого блока FAQ (с англ. frequently asked questions - самые задаваемые вопросы).

Чаще всего этот блок работает так: при нажатии на вопрос клиенту показывается ответ, при повторном нажатии текст скрывается. На wordpress такой функционал можно быстро сделать с помощью плагина, например Accordion & FAQ. Но в этой статье рассмотрим, как сделать блок вопросов на сайте без плагинов, смс и регистраций, используя лишь css, html и jquery.

1HTML разметка блока

<div class="faq">
<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 код

<style>
.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 библиотеку)

<script>
$('.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 необходимое количество раз.


Добавить комментарий

Ваш адрес email не будет опубликован.

*
code