A
V
Responsive & Customizable Accordion
Seamless Navigation with Style
Our responsive accordion provides an elegant solution for organizing content and enhancing user experience. Designed to adapt to any screen size, our accordion ensures that your website remains intuitive and accessible, whether your audience is on a desktop, tablet, or smartphone.
Key Features:
- Fully Responsive: Our accordion automatically adjusts to different screen sizes, providing a smooth and consistent experience across all devices.
- Easily Customizable: Tailor the appearance and behavior of the accordion to fit your brand's style. With extensive customization options, you can modify colors, fonts, spacing, and animations effortlessly.
- Smooth Animations: Enhance user interaction with smooth transitions and hover effects that make navigation engaging and enjoyable.
- Simple Integration: Integrating our accordion into your website is straightforward, with clean and well-documented code that makes setup a breeze.
- Cross-Browser Compatibility: Our accordion is tested to work seamlessly across all major browsers, ensuring that your users get the best experience regardless of their preferred platform.
General Accordion
The accordion is built using nested containers and utility classes for layout, spacing, border, and interaction styling.
- Accordian Section (AnSn): Serves as the main container holding all accordion sections.
- Accordion Container (AnCr): Represents each individual collapsible section.
- Accordian Section Header (AnCrHr): Acts as the clickable toggle for expanding or collapsing content.
- Accordian Header (AnHr): Displays the title of the section.
- Accordian Icon (AnIn) : Provides a visual indicator for expand/collapse state.
- Accordian Container Panel (AnCrPl): Contains the hidden content shown upon expansion.
- Accordian Panel (AnPl): Holds the actual content text or elements.
Behaviour and Use Cases
- Clicking the header toggles the visibility of the content panel
- Collapsible navigation menus
- Step-by-step guides
- Structured information display
<div class="AnSn Wh100p PgTpBm10 PgLtRt7 Br1 CrBrTe BrRs7 DyFx FxDnCn Gp5">
<div class="AnCr">
<div class="AnCrHr">
<div class="AnHr">Section 1</div>
<i class="CT-ArrowDownCircleSolid AnIn"></i>
</div>
<div class="AnCrPl">
<div class="AnPl Pg10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</div>
</div>
<div class="AnCr">
<div class="AnCrHr">
<div class="AnHr">Section 2</div>
<i class="CT-ArrowDownCircleSolid AnIn"></i>
</div>
<div class="AnCrPl">
<div class="AnPl Pg10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</div>
</div>
<div class="AnCr">
<div class="AnCrHr">
<div class="AnHr">Section 3</div>
<i class="CT-ArrowDownCircleSolid AnIn"></i>
</div>
<div class="AnCrPl">
<div class="AnPl Pg10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</div>
</div>
</div>
Multi Open Accordion
<div class="AnSn Wh100p PgTpBm10 PgLtRt7 Br1 CrBrTe BrRs7 DyFx FxDnCn Gp5" data-multiopen="true">
<div class="AnCr">
<div class="AnCrHr">
<div class="AnHr">Section 1</div>
<i class="CT-ArrowDownCircleSolid AnIn"></i>
</div>
<div class="AnCrPl">
<div class="AnPl Pg10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</div>
</div>
<div class="AnCr">
<div class="AnCrHr">
<div class="AnHr">Section 2</div>
<i class="CT-ArrowDownCircleSolid AnIn"></i>
</div>
<div class="AnCrPl">
<div class="AnPl Pg10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</div>
</div>
<div class="AnCr">
<div class="AnCrHr">
<div class="AnHr">Section 3</div>
<i class="CT-ArrowDownCircleSolid AnIn"></i>
</div>
<div class="AnCrPl">
<div class="AnPl Pg10">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</div>
</div>
</div>
Interactive Accordion
This accordion component lets you expand and collapse sections to show or hide content. In addition to standard accordion behavior, it offers programmatic controls using predefined JavaScript methods. This allows developers to interact with the accordion dynamically — for example, opening or closing a section based on user action, or disabling certain sections entirely.
JavaScript Methods Explained
-
Create Accordian (CeAn): Used to initialize and configure the accordion component.
Example
CT.CeAn({ Id: 'myAccordion', Active: [0], Disable: [1], Hide: [2], MultipleOpen: true });
Creates an Accordian. - Active Accordian (AeAn({ Active: [index] })): Open one or more sections.
Example
AeAn( { Active: [0] } )
Opens Section One. - InActive Accordian (IeAn({ InActive: [index] })): Close (collapse) one or more sections.
Example
IeAn( { InActive: [0] } )
Close Section One. - Disable Accordian (DeAn({ Disable: [index] })): Disables a section, making it visible but not clickable.
Example
DeAn( { Disable: [1] } )
Disable Section Two. - Enable Accordian (EeAn({ Enable: [index] })): Re-enables a section that was previously disabled, making it clickable again.
Example
EeAn( { Enable: [1] } )
Enable Section Two. - Hide Accordian (HeAn({ Hide: [index] })): Re-enables a section that was previously disabled, making it clickable again.
Example
HeAn( { Hide: [2] } )
This removes Section 3 from the interface visually. - Unhide Accordian (UeAn({ UnHide: [index] })): Makes a previously hidden section visible again.
Example
UeAn( { Hide: [2] } )
Unhide Section Two.
Behaviour and Use Cases
- Clicking the header toggles the visibility of the content panel
- Collapsible navigation menus
- Step-by-step guides
- Structured information display
You can call these functions to interact with accordion
<div id="myAccordion" class="AnSn Wh100p PgTpBm10 PgLtRt7 Br1 CrBrTe BrRs7 DyFx FxDnCn Gp5"> <div class="AnCr"> <div class="AnCrHr"> <div class="AnHr">Section 1</div> <i class="CT-ArrowDownCircleSolid AnIn"></i> </div> <div class="AnCrPl"> <div class="AnPl Pg10"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="AnCr"> <div class="AnCrHr"> <div class="AnHr">Section 2</div> <i class="CT-ArrowDownCircleSolid AnIn"></i> </div> <div class="AnCrPl"> <div class="AnPl Pg10"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="AnCr"> <div class="AnCrHr"> <div class="AnHr">Section 3</div> <i class="CT-ArrowDownCircleSolid AnIn"></i> </div> <div class="AnCrPl"> <div class="AnPl Pg10"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="AnCr"> <div class="AnCrHr"> <div class="AnHr">Section 4</div> <i class="CT-ArrowDownCircleSolid AnIn"></i> </div> <div class="AnCrPl"> <div class="AnPl Pg10"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="AnCr"> <div class="AnCrHr"> <div class="AnHr">Section 5</div> <i class="CT-ArrowDownCircleSolid AnIn"></i> </div> <div class="AnCrPl"> <div class="AnPl Pg10"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <br/> <div class="DyFx FxDnCn Gp10"> <p>You can call these functions to interact with accordion</p> <div class="DyFx FxWp Gp10"> <button id="activeButton" class="Bn CrBdTt Br2 CrBrTe CrTe30Lt">Active 1</button> <button id="inActiveButton" class="Bn CrBdTt Br2 CrBrTe CrTe30Lt">InActive 1</button> <button id="enableButton" class="Bn CrBdTt Br2 CrBrTe CrTe30Lt">Enable 2</button> <button id="disableButton" class="Bn CrBdTt Br2 CrBrTe CrTe30Lt">Disable 2</button> <button id="hideButton" class="Bn CrBdTt Br2 CrBrTe CrTe30Lt">Hide 3</button> <button id="unHideButton" class="Bn CrBdTt Br2 CrBrTe CrTe30Lt">UnHide 3</button> </div> </div> </div>
document.addEventListener('DOMContentLoaded', () => { CT.CeAn({ // Create Accordion Id: 'myAccordion', Active: [0], // Open 0th panel Disable: [1], // Disable 1st panel - not clickable but visible Hide: [2], // Hide 2nd panel - not visible MultipleOpen: true, // To open multiple panel at the same time }); document.getElementById("activeButton").addEventListener("click", () => { CT.AeAn({ // Active Accordion Id: 'myAccordion', Active: [0], }) }); document.getElementById("inActiveButton").addEventListener("click", () => { CT.IeAn({ // InActive Accordion Id: 'myAccordion', InActive: [0], }) }); document.getElementById("enableButton").addEventListener("click", () => { CT.EeAn({ // Enable Accordion Id: 'myAccordion', Enable: [1], }) }); document.getElementById("disableButton").addEventListener("click", () => { CT.DeAn({ // Disable Accordion Id: 'myAccordion', Disable: [1], }) }); document.getElementById("hideButton").addEventListener("click", () => { CT.HeAn({ // Hide Accordion Id: 'myAccordion', Hide: [2], }) }); document.getElementById("unHideButton").addEventListener("click", () => { CT.UeAn({ // UnHide Accordion Id: 'myAccordion', UnHide: [2], }) }); })
// In some cases you may want to use the accordion and call init function manually.
document.addEventListener('DOMContentLoaded', function () {
CT.ItAn(); // init accordion
});