Bulma Accordion

A simple and flexible accordion extension for Bulma.

The Accordion extension allows you to create collapsible content sections. It supports multiple sizes, all Bulma colors, and smooth transitions.

Basic Accordion

Wrap your items in an .accordions container. Use .is-active to expand an item.

Accordion Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec nam aliquam sem. Aliquam quis eleifend ex.

Accordion Header 2

Aenean feugiat tellus eu sodales scelerisque. Ut nisl dui, ornare quis ultrices vel, scelerisque nec diam. 
<div class="accordions">
    <article class="accordion is-active">
        <div class="accordion-header toggle">
            <p>Header</p>
            <button class="toggle"></button>
        </div>
        <div class="accordion-body">
            <div class="accordion-content">Content...</div>
        </div>
    </article>
</div>

Color Variations

Easily apply Bulma's standard color palette.

Primary Accordion

Content for the primary styled accordion.

Info Accordion

Content for the info styled accordion.

Success Accordion

Content for the success styled accordion.

Sizing

Choose the size that fits your design: small, normal, medium, or large.

Small Accordion

Small content area.

Large Accordion

Large content area with bigger text.

Scripting

Scripting is needed to toggle the accordion on event, it can be done with a simple function or a component model. 

class BulmaAccordion {
    constructor(node) {
        this.accordion = node;
        this.button = this.accordion.querySelector('.toggle');
        this.init();
    }
    init() {
        if (this.button) this.button.addEventListener('click', () => this.togglePanel());
    }
    togglePanel() {
        this.accordion.classList.toggle('is-active');
    }
}

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.accordion').forEach(n => new BulmaAccordion(n));
});