Щоб створити блоки питань і відповідей на вашому сайті, ви можете використовувати акордеон. Акордеон дозволяє користувачам легко розкривати потрібну інформацію, зберігаючи при цьому компактний вигляд сторінки. У цій статті ми розглянемо, як використовувати акордеон на вашому сайті.
Щоб використати акордеон на вашому сайті, вам необхідно:
- Додайте HTML-код акордеону на сторінку, включаючи потрібну кількість елементів з питаннями і відповідями.
- Додайте CSS-стилізацію акордеону до вашого файлу стилів.
- Додайте JavaScript-код ініціалізації акордеону до вашого файлу скриптів або включіть його безпосередньо на сторінці.
1 Код FAQ, Accordion
Вам необхідно додати на вашу сторінку 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> |
Цей код включає в себе контейнер акордеону з ID “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” для заголовка та виконує анімацію розкриття або закриття контенту.
Це все! Все буде працювати на вашому сайті, користувачі зможуть легко переглядати та розкривати питання та відповіді.
Будь ласка, зверніть увагу, що ви маєте враховувати структуру вашого веб-сайту та використовувати відповідні селектори для ініціалізації акордеону та стилізації його елементів.
Залишити відповідь