MIZ

Github

MIZ v1.20.22

v1.20.22

Light

Dark

System

Browse docs

Getting started

Introduction
Install
Contents
RTL

Customize

Structure

Layouts

Components

Examples and Test

Code Editor
Demos

About

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.

Basic Example #

            
                
                    
                        
                        
                            item 1 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                    
                        
                        
                            item 2 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                    
                        
                        
                            item 3 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                
            
            
                
                HTML
                
            
            <div class="accordion-container d-flex flex-column gap-1">
    <div class="accordion">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 1 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 1.</p>
            </div>
        </div>
    </div>
    <div class="accordion active">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 2.</p>
            </div>
        </div>
    </div>
    <div class="accordion">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 2.</p>
            </div>
        </div>
    </div>
</div>

            
                
                    
                        
                        
                            item 1 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                    
                        
                        
                            item 2 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                    
                        
                        
                            item 3 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                
            
            
                
                HTML
                
            
            <div class="accordion-container d-flex flex-row gap-1">
    <div class="accordion">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 1 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 1.</p>
            </div>
        </div>
    </div>
    <div class="accordion active">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 2.</p>
            </div>
        </div>
    </div>
    <div class="accordion">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 2.</p>
            </div>
        </div>
    </div>
</div>

            
                
                    
                        
                        
                            item 1 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                    
                        
                        
                            item 2 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                    
                        
                        
                            item 3 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                
            
            
                
                HTML
                
            
            <div class="accordion-container d-flex flex-column bg-primary-color on-primary-color">
    <div class="accordion">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 1 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 1.</p>
            </div>
        </div>
    </div>
    <div class="accordion active">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 2.</p>
            </div>
        </div>
    </div>
    <div class="accordion">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 2.</p>
            </div>
        </div>
    </div>
</div>

            
                
                    
                        
                        
                            item 1 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                    
                        
                        
                            item 2 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                    
                        
                        
                            item 3 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                
            
            
                
                HTML
                
            
            <div class="accordion-container d-flex flex-row bg-primary-color on-primary-color">
    <div class="accordion">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 1 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 1.</p>
            </div>
        </div>
    </div>
    <div class="accordion active">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 2.</p>
            </div>
        </div>
    </div>
    <div class="accordion">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 2.</p>
            </div>
        </div>
    </div>
</div>

            
            
                    
                        
                        
                            item 1 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                    
                        
                        
                            item 2 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                    
                        
                        
                            item 3 
                            
                                Yes, MIZ is similar to other frameworks like MIZ and Tailwind but with its own unique features. Unlike MIZ, which is limited to predefined structures, and Tailwind, which relies on JavaScript, MIZ offers high customization capabilities and uses SCSS as its preprocessor.
                            
                        
                    
                
            
            
                
                HTML
                
            
            <div class="accordion-container d-flex flex-column scroll-accordion gap-1" style="height:150px">
    <div class="accordion">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 1 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 1.</p>
            </div>
        </div>
    </div>
    <div class="accordion active">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 2.</p>
            </div>
        </div>
    </div>
    <div class="accordion">
        <div class="accordion-box bg-primary-color on-primary-color">
            <span>item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p>Content for item 2.</p>
            </div>
        </div>
    </div>
</div>

⚠️ Warning: To use this code, you need to apply the active class and make changes with JavaScript (JS).

HTML Structure #

Class	Description
.accordion-container	The main wrapper for the Accordion that contains all the items.
.scroll-accordion	The main wrapper for the Accordion that contains all the items.
.accordion	Each accordion item consists of a header and collapsible content. Add the active class to keep the item expanded by default.
.accordion-box	The container for each accordion item’s header and content. To change the color, you need to add appropriate color classes.
span	The clickable header of each item. When clicked, the content of the respective item is toggled (expanded/collapsed).

Customization Options #

Smooth Transition: The content opens and closes with a transition set to 0.5s, providing a smooth user experience.
Rotating Icon: The chevron icon rotates when the accordion expands, providing a visual cue for interaction.

Scrollable Accordion #

If you have a lot of content inside the accordion, you can use the scroll-accordion class to set a maximum height and make the content scrollable.

On this page

Basic Example
HTML Structure
Customization Options
Scrollable Accordion