Чтобы создать блоки вопросов и ответов на вашем сайте, вы можете использовать аккордеон. Аккордеон позволяет пользователям легко развернуть необходимую информацию, при этом сохраняя компактный вид страницы. В этой статье мы рассмотрим, как использовать аккордеон на вашем сайте.
Чтобы использовать аккордеон на вашем сайте, вам необходимо:
- Добавьте HTML-код аккордеона на страницу, включая нужное количество элементов с вопросами и ответами.
- Добавьте CSS-оформление аккордеона в ваш файл стилей.
- Добавьте JavaScript-код инициализации аккордеона в ваш файл скриптов или включите его непосредственно на странице.
1 Код FAQ, Аккордеон
Вам нужно добавить HTML-код на вашу страницу. Вот пример кода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="faq_vn"> <div id="accordion-js"> <div class="item"> <div class="heading">Вкладка 1</div> <div class="content"> Контент вкладки 1 </div> </div> <div class="item"> <div class="heading">Вкладка 2</div> <div class="content">Контент вкладки 2</div> </div> <div class="item"> <div class="heading">Вкладка 3</div> <div class="content">Контент вкладки 3</div> </div> <div class="item"> <div class="heading">Вкладка 4</div> <div class="content">Контент вкладки 4</div> </div> </div> </div> |
Этот код содержит контейнер аккордеона с идентификатором «accordion-js» и несколько элементов с вопросами и ответами. Вы можете добавлять или удалять элементы в зависимости от вашего контента.
2 Стилизация аккордеона
Для стилизации используется CSS:
|
1 2 3 4 5 6 7 8 9 |
/* Accordion styles */ .faq_vn .item {margin-bottom: 15px;background: #F5F5F5;} .faq_vn .item .heading {border-top: 1px solid #F5F5F5;background: #F5F5F5;border-radius: 3px;cursor: pointer;font-weight: 700;font-size: 20px;padding: 20px 54px 20px 20px;position: relative;} .faq_vn .item .heading::before {content: "";background-image: url('data:image/svg+xml,%3Csvg width=\'16\' height=\'10\' viewBox=\'0 0 16 10\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M15 1.5L8 8.5L1 1.5\' stroke=\'url(%23paint0_linear_289_66)\' stroke-width=\'2\'/%3E%3Cdefs%3E%3ClinearGradient id=\'paint0_linear_289_66\' x1=\'1.00001\' y1=\'1.5\' x2=\'1.00343\' y2=\'8.53779\' gradientUnits=\'userSpaceOnUse\'%3E%3Cstop stop-color=\'%2374B427\'/%3E%3Cstop offset=\'1\' stop-color=\'%23345D02\'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');background-size: contain;background-repeat: no-repeat;width: 20px;height: 15px;position: absolute;top: 50%;right: 20px;transform: translateY(-50%);} .faq_vn .accord_active::before {background-image: url('data:image/svg+xml,%3Csvg width=\'16\' height=\'10\' viewBox=\'0 0 16 10\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M15 8.5L8 1.5L1 8.5\' stroke=\'url(%23paint0_linear_194_5768)\' stroke-width=\'2\'/%3E%3Cdefs%3E%3ClinearGradient id=\'paint0_linear_194_5768\' x1=\'1.00001\' y1=\'8.5\' x2=\'1.00343\' y2=\'1.46221\' gradientUnits=\'userSpaceOnUse\'%3E%3Cstop stop-color=\'%2374B427\'/%3E%3Cstop offset=\'1\' stop-color=\'%23345D02\'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E')!important;} .faq_vn .item .content {padding: 0px 54px 20px 20px;display: none;} .faq_vn .accord_active {border-top: 1px solid #74B427!important;border-left: 1px solid #74B427;border-right: 1px solid #74B427;} .faq_vn .item .content {border-bottom: 1px solid #74B427;border-left: 1px solid #74B427;border-right: 1px solid #74B427;} |
Эти стили определяют внешний вид заголовков и контента аккордеона.
3 Инициализация
Для правильной работы необходимо инициализировать его с помощью JavaScript. Вот JavaScript-код, который отвечает за открытие и закрытие элементов:
|
1 2 3 4 5 6 7 |
// Accordion FAQ - щоб приховати, додайте в кінці після .stop() - .hide(); jQuery(document).ready(function($){ jQuery('#accordion-js').find('.heading').click(function($){ jQuery(this).toggleClass('accord_active').next().stop().slideToggle(); }).next().stop(); }); |
Этот код определяет обработчик событий для клика по заголовку элемента аккордеона. При клике на заголовок вызывается функция, которая переключает класс «accord_active» для заголовка и выполняет анимацию раскрытия или закрытия контента.
Вот и все! Все будет работать на вашем сайте, пользователи смогут легко просматривать и раскрывать вопросы и ответы.
Обратите внимание, что вы должны учитывать структуру вашего веб-сайта и использовать соответствующие селекторы для инициализации аккордеона и стилизации его элементов.
Добавить комментарий