To create question and answer blocks on your website, you can use an accordion. An accordion allows users to easily expand the necessary information while maintaining a compact page layout. In this article, we will discuss how to use an accordion on your website.
To use an accordion on your website, you need to:
- Add the HTML code for the accordion to your page, including the desired number of elements with questions and answers.
- Add CSS styling for the accordion to your style sheet.
- Add JavaScript initialization code for the accordion to your script file or include it directly on the page.
1 FAQ Code, Accordion
You need to add HTML code to your page. Here’s an example of the code:
|
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> |
This code includes an accordion container with the ID “accordion-js” and several elements with questions and answers. You can add or remove elements depending on your content.
2 Accordion Styling
CSS is used for styling:
|
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;} |
These styles define the appearance of the accordion’s headings and content.
3 Initialization
To make it work correctly, you need to initialize it using JavaScript. Here’s the JavaScript code that handles opening and closing of the elements:
|
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(); }); |
This code defines an event handler for clicking on the accordion heading. When the heading is clicked, a function is called that toggles the “accord_active” class for the heading and performs the animation for expanding or collapsing the content.
That’s it! Everything will work on your website, and users will be able to easily view and expand the questions and answers.
Please note that you should consider the structure of your website and use appropriate selectors for initializing the accordion and styling its elements.
Leave a Reply