Поддержать проект - жмяк

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

10149
()

На многих лендингах и онлайн - магазинах можно увидеть блок вопросов и ответов для клиентов. Чаще всего он расположен в самом низу страницы и служит для того, чтобы закрывать "боли" покупателя: давать ответы на самые распространенные вопросы о товаре или услуге. Например, по доставке, оплате, регистрации на сайте и пр. К тому же такой виджет значительно снимает нагрузку с онлайн - консультанта, если он есть. Т. к. всю нужную информацию клиент может получить из этого блока 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 необходимое количество раз.


Понравилась статья?

Оцените!

Средняя оценка / 5. Количество оценок:

Оценок пока нет. Поставьте оценку первым!

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

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

*
code