N
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
Section 1
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.
Section 2
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.
Section 3
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.
Source Code

<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

Section 1
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.
Section 2
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.
Section 3
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.
Source Code

<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
Section 1
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.
Section 2
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.
Section 3
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.
Section 4
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.
Section 5
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.

You can call these functions to interact with accordion

Source Code

<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],
        })
    });

})

Initialize General Accordion Manually
Source Code

// In some cases you may want to use the accordion and call init function manually.
document.addEventListener('DOMContentLoaded', function () {
    CT.ItAn(); // init accordion
});

Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
  Logout
  Change Password
  Change Email

Loading...