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 w-50 py-1 px-2 all-border-small">
    <div class="accordion">
        <div class="accordion-box">
            <span class="primary-color on-primary-color">item 1 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p class="on-primary-color">Content for item 1.</p>
            </div>
        </div>
    </div>
    <div class="accordion active">
        <div class="accordion-box">
            <span class="primary-color on-primary-color">item 2 <i class="fa-solid fa-chevron-down txt-subtitle mr-1"></i></span>
            <div>
                <p class="on-primary-color">Content for item 2.</p>
            </div>
        </div>
    </div>
</div>
                

HTML Structure #

Class	Description
.accordion-container	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.
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.