Accordion

The Accordion component allows users to display multiple sections of content in a limited space. Each item can be expanded or collapsed by clicking on its header.

Description #

The Accordion component is an interactive element that allows users to expand and collapse content sections. It supports two main modes:

• Dependent Mode (accordion-relative): Only one section can be open at a time. Opening a new section automatically closes others.

• Independent Mode (accordion-absolute): Multiple sections can be open simultaneously. Each section operates independently.

Examples and Classes #

Basic Example

            

            

                

                    

                        accordion-relative (default) 
                        

                            
By default, all accordions act as part of a group. Opening one will close the others within the same parent container. This helps maintain a clean UI where only one section is expanded at a time.
                            
Features:
                            

                                
Only one section open at once
                                
Automatic closing of siblings
                                
Class used: .accordion-relative
                            
                        
                    
                
                

                    

                        accordion-relative (default) 
                        

                            
By default, all accordions act as part of a group. Opening one will close the others within the same parent container. This helps maintain a clean UI where only one section is expanded at a time.
                            
Features:
                            

                                
Only one section open at once
                                
Automatic closing of siblings
                                
Class used: .accordion-relative
                            
                            
                    
                
            
            

                

                    

                        accordion-absolute 
                        

                            
Adding this class to an accordion makes it behave independently. Opening or closing it won't affect others. Perfect for use cases like FAQs or expandable layouts with no restriction.
                            
Features:
                            

                                
Each accordion opens/closes independently
                                
No sibling is affected
                                
Class used: .accordion-absolute
                            
                            
                    
                
                

                    

                        accordion-absolute 
                        

                            
Adding this class to an accordion makes it behave independently. Opening or closing it won't affect others. Perfect for use cases like FAQs or expandable layouts with no restriction.
                            
Features:
                            

                                
Each accordion opens/closes independently
                                
No sibling is affected
                                
Class used: .accordion-absolute
                            
                            
                    
                    
                
            
            

                
                
HTML
                
            
        <div class="accordion-group">
    <div class="accordion accordion-relative">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">accordion-relative (default) <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color mb-2">By default, all accordions act as part of a group. Opening one will close the others within the same parent container. This helps maintain a clean UI where only one section is expanded at a time.</p>
                <p class="mb-1">Features:</p>
                <ul class="pl-4 list-style-disc">
                    <li>Only one section open at once</li>
                    <li>Automatic closing of siblings</li>
                    <li>Class used: .accordion-relative</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="accordion accordion-relative">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">accordion-relative (default) <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color mb-2">By default, all accordions act as part of a group. Opening one will close the others within the same parent container. This helps maintain a clean UI where only one section is expanded at a time.</p>
                <p class="mb-1">Features:</p>
                <ul class="pl-4 list-style-disc">
                    <li>Only one section open at once</li>
                    <li>Automatic closing of siblings</li>
                    <li>Class used: .accordion-relative</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion accordion-absolute">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">accordion-absolute <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color mb-2">Adding this class to an accordion makes it behave independently. Opening or closing it won't affect others. Perfect for use cases like FAQs or expandable layouts with no restriction.</p>
                <p class="mb-1">Features:</p>
                <ul class="pl-4 list-style-disc">
                    <li>Each accordion opens/closes independently</li>
                    <li>No sibling is affected</li>
                    <li>Class used: .accordion-absolute</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="accordion accordion-absolute">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">accordion-absolute <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color mb-2">Adding this class to an accordion makes it behave independently. Opening or closing it won't affect others. Perfect for use cases like FAQs or expandable layouts with no restriction.</p>
                <p class="mb-1">Features:</p>
                <ul class="pl-4 list-style-disc">
                    <li>Each accordion opens/closes independently</li>
                    <li>No sibling is affected</li>
                    <li>Class used: .accordion-absolute</li>
                </ul>
            </div>
        </div>
    </div>
</div>

        

            

                

                    

                        Getting Started 
                        

                            
Welcome to MIZ Framework! This modern UI framework combines the best features of popular frameworks while maintaining its own unique identity. Built with SCSS and JavaScript, MIZ offers a powerful and flexible solution for your web development needs.
                        
                    
                
                

                    

                        Key Features 
                        

                            
MIZ Framework provides a comprehensive set of features including responsive design, customizable components, and intuitive utilities. Our framework is designed to help you build beautiful, modern web applications with ease.
                            
                    
                
                

                    

                        Customization 
                        

                            
One of MIZ's greatest strengths is its customization capabilities. Using SCSS as its preprocessor, you can easily modify and extend the framework to match your project's unique requirements and design system.
                            
                    
                
                

                    

                        Components 
                        

                            
MIZ comes with a rich set of pre-built components like this accordion, buttons, cards, and more. Each component is carefully designed to be both functional and aesthetically pleasing, with consistent styling across the framework.
                            
                    
                
                

                    

                        Documentation 
                        

                            
Our comprehensive documentation makes it easy to get started with MIZ. You'll find detailed examples, API references, and best practices to help you make the most of the framework's capabilities.
                
            
            
                

                    

                        Community 
                        

                            
Join our growing community of developers! Share your experiences, contribute to the framework, and help shape the future of MIZ. Together, we can build better web applications.
                            
                    
                
                

                    

                        Performance 
                        

                            
MIZ is optimized for performance, with minimal overhead and efficient code. Our framework ensures your applications load quickly and run smoothly, providing an excellent user experience.
                            
                    
                
                

                    

                        Browser Support 
                        

                            
MIZ is built with modern web standards in mind, ensuring compatibility across all major browsers. We regularly test and update our framework to maintain broad browser support.
                            
                    
                    
                
            
            

                
                
HTML
                
            
    <div class="accordion-group scroll-accordion">
    <div class="accordion accordion-relative bg-secondary-color">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">Getting Started <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color">Welcome to MIZ Framework! This modern UI framework combines the best features of popular frameworks while maintaining its own unique identity. Built with SCSS and JavaScript, MIZ offers a powerful and flexible solution for your web development needs.</p>
            </div>
        </div>
    </div>
    <div class="accordion accordion-relative bg-secondary-color">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">Key Features <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color">MIZ Framework provides a comprehensive set of features including responsive design, customizable components, and intuitive utilities. Our framework is designed to help you build beautiful, modern web applications with ease.</p>
            </div>
        </div>
    </div>
    <div class="accordion accordion-relative bg-secondary-color">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">Customization <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color">One of MIZ's greatest strengths is its customization capabilities. Using SCSS as its preprocessor, you can easily modify and extend the framework to match your project's unique requirements and design system.</p>
            </div>
        </div>
    </div>
    <div class="accordion accordion-relative bg-secondary-color">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">Components <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color">MIZ comes with a rich set of pre-built components like this accordion, buttons, cards, and more. Each component is carefully designed to be both functional and aesthetically pleasing, with consistent styling across the framework.</p>
            </div>
        </div>
    </div>
    <div class="accordion accordion-relative bg-secondary-color">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">Documentation <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color">Our comprehensive documentation makes it easy to get started with MIZ. You'll find detailed examples, API references, and best practices to help you make the most of the framework's capabilities.</p>
            </div>
        </div>
    </div>
    <div class="accordion accordion-relative">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">Community <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color">Join our growing community of developers! Share your experiences, contribute to the framework, and help shape the future of MIZ. Together, we can build better web applications.</p>
            </div>
        </div>
    </div>
    <div class="accordion accordion-absolute">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">Performance <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color">MIZ is optimized for performance, with minimal overhead and efficient code. Our framework ensures your applications load quickly and run smoothly, providing an excellent user experience.</p>
            </div>
        </div>
    </div>
    <div class="accordion accordion-absolute">
        <div class="accordion-box">
            <span class="accordion-header on-primary-color">Browser Support <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div class="accordion-body">
                <p class="on-primary-color">MIZ is built with modern web standards in mind, ensuring compatibility across all major browsers. We regularly test and update our framework to maintain broad browser support.</p>
            </div>
        </div>
    </div>
</div>

Available Classes

Class	Description
.accordion-group	Main wrapper for the accordion items. Controls the layout and spacing of multiple accordions.
.accordion	Individual accordion item. Can be used with modifiers like accordion-relative or accordion-absolute.
.accordion-box	Container for header and content. Manages the spacing and border of accordion items.
.accordion-header	The clickable header of the accordion. Contains the title and toggle icon.
.accordion-body	The expandable content area of the accordion. Contains the main content.
.accordion-relative	Makes the accordion dependent on others in the same group. Only one can be open at a time.
.accordion-absolute	Makes the accordion independent. Multiple accordions can be open simultaneously.
.scroll-accordion	Enables scrolling for long content within the accordion group.
.active	Applied to open accordion items. Controls the expanded state and animations.

Layout Variations

The accordion component supports different layout variations:

• Dependent Mode (accordion-relative): Only one section can be open at a time
• Independent Mode (accordion-absolute): Multiple sections can be open simultaneously
• Scrollable Content: For long content with fixed height and scrolling
• Grouped Layout: Multiple accordions organized in a group with consistent styling

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/accordion/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/accordion/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/accordion/script.js	JavaScript functionality

SCSS Variables #

        

            
            
SCSS
            
        
        $accordion-height-scroll: 500px;
$accordion-rotate-icon: 180deg;
$accordion-transition: 0.5s;

$accordion-group-custom-classes: ".d-flex, .flex-column, .gap-1";
$accordion-custom-classes: ".bg-primary-color, .on-primary-color, .txt-title, .radius-all-small";
$accordion-body-custom-classes: ".pl-2, .txt-small";
$accordion-header-custom-classes: ".bw-1, .border-t-none, .border-l-none, .border-r-none, .border-style-solid, .border-on-primary-color, .pb-1";
$accordion-box-custom-classes: ".gap-1, .p-2";
$accordion-zebra-custom-classes: ".bg-secondary-color";

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
accordionItems	Property	NodeList of all accordion elements
constructor()	Method	Initializes the accordion component and sets up event listeners
init()	Method	Sets up click event listeners for all accordion items
handleAccordionClick(event)	Method	Handles click events on accordion items and manages their state
isIndependent(item)	Method	Checks if an accordion item is in independent mode
toggleAccordion(item)	Method	Toggles the active state of an accordion item
closeOtherAccordions(siblings, currentItem)	Method	Closes other accordion items when in dependent mode

Implementation Example

        

            
            
JavaScript
            
        
        class Accordion {
    constructor() {
        this.accordionItems = document.querySelectorAll('.accordion');
        this.init();
    }

    init() {
        this.accordionItems.forEach(item => {
            item.addEventListener('click', (event) => this.handleAccordionClick(event));
        });
    }

    handleAccordionClick(event) {
        const clickedItem = event.currentTarget;
        const parentElement = clickedItem.parentElement;
        const siblings = parentElement.querySelectorAll('.accordion');

        if (this.isIndependent(clickedItem)) {
            this.toggleAccordion(clickedItem);
            return;
        }

        this.closeOtherAccordions(siblings, clickedItem);
        this.toggleAccordion(clickedItem);
    }

    isIndependent(item) {
        return item.classList.contains('accordion-relative');
    }

    toggleAccordion(item) {
        item.classList.toggle('active');
    }

    closeOtherAccordions(siblings, currentItem) {
        siblings.forEach(sibling => {
            if (sibling !== currentItem && !this.isIndependent(sibling)) {
                sibling.classList.remove('active');
            }
        });
    }
}

// Initialize accordion when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new Accordion();
});