General Date & Time pickers Event Calendar Form components Gesture enabled responsive list Numeric pickers Pickers & dropdowns Page layout & navigation Tools Accessibility

Accordion

Using the Accordion component, you can organize the Form group and Card collapsible elements. Accordion allows showing only one collapsible item at the same time.

Initialization

Simply put the mbsc-accordion attribute on the container element. The accordion will be automatically initialized when the page is loaded.

Accordion with form groups
<div mbsc-accordion>
    <div class="mbsc-form-group" data-collapsible>
        <div class="mbsc-form-group-title">
            Form group title
        </div>
        <div class="mbsc-form-group-content">
            Form Group content...
        </div>
    </div>
    
    <div class="mbsc-form-group" data-collapsible>
        <div class="mbsc-form-group-title">
            Form group title
        </div>
        <div class="mbsc-form-group-content">
            Form Group content...
        </div>
    </div>
    
    <!-- ... -->
</div>
Accordion with
<div mbsc-accordion>
    <div mbsc-card data-collapsible data-open>
        <div class="mbsc-card-header">
            <div class="mbsc-card-title">Card title</div>
            <div class="mbsc-card-subtitle">Card subtitle</div>
        </div>
        <div class="mbsc-card-content">
            Card content...
        </div>
    </div>
    
    <div mbsc-card data-collapsible>
        <div class="mbsc-card-header">
            <div class="mbsc-card-title">Card title</div>
            <div class="mbsc-card-subtitle">Card subtitle</div>
        </div>
        <div class="mbsc-card-content">
            Card content...
        </div>
    </div>
    
    <!-- ... -->
</div>