Step-by-Step Guide: Creating a Custom Accordion
This guide will walk you through creating a custom accordion component using HTML, CSS, and jQuery. An accordion is a user interface element that allows you to show or hide content when a specific trigger, such as a button, is clicked.
1. HTML Structure
<!DOCTYPE html><html lang=”en”><head><!– Head content here –><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Accordian</title><link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”></head><body><div class=”site-wrapper container”><div class=”accordian-container”><div class=”accordian-btn”>Button 1</div><div class=”content”><!– Content for section 1 goes here –></div></div><!– You can add more .accordian-container elements as needed –></div></body></html>
2. CSS Style
<style>:root {–font-awesome: ‘FontAwesome’;–font-awesome-pro: ‘Font Awesome 6 Pro’;}.accordian-container {border: 1px solid #efefef;padding: 12px;}.accordian-container .content {margin-top: 0;height: 0;opacity: 0;overflow: hidden;transition:height ease 0.5s,opacity ease 0.5s,margin ease 0.5s;}/* on click of btn */.accordian-container.is-active .content {margin-top: 17px;height: auto;opacity: 1;}.accordian-btn {cursor: pointer;position: relative;}.accordian-btn::after {content: ‘\2b’;font-size: 12px;line-height: 14px;font-family: var(–font-awesome-pro);position: absolute;right: 0;top: 50%;transform: translateY(-50%);}.accordian-container.is-active .accordian-btn::after {content: ‘\f068’;}</style>
2. JS Script
<script src=”https://kit.fontawesome.com/20e2f44b6f.js” crossorigin=”anonymous”></script><script src=”https://code.jquery.com/jquery-3.6.4.slim.min.js”integrity=”sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=” crossorigin=”anonymous”></script><script>$ = jQuery;$(function () {$(‘.accordian-btn’).on(‘click’, function () {$(this).closest(‘.accordian-container’).toggleClass(‘is-active’);});});</script>
This custom accordion is built using HTML, CSS, and jQuery. It consists of multiple .accordian-container elements, each containing a button with the class .accordian-btn and a content area with the class .content. When a button is clicked, the associated content area expands or collapses with a smooth animation.
The styling for the accordion can be customized according to your needs by adding styles to the provided CSS section.
