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

Use the <mbsc-accordion> component for initialization.

Accordion with form groups
<mbsc-accordion>
    <mbsc-form-group collapsible open>
        <mbsc-form-group-title>Title</mbsc-form-group-title>
        <mbsc-form-group-content>
            Form Group Content
        </mbsc-form-group-content>
    </mbsc-form-group>
    <mbsc-form-group collapsible>
        <mbsc-form-group-title>Title</mbsc-form-group-title>
        <mbsc-form-group-content>
            Form Group Content
        </mbsc-form-group-content>
    </mbsc-form-group>
    
    <!-- ... -->
</mbsc-accordion>
Accordion with cards
<mbsc-accordion>
    <mbsc-card collapsible open>
        <mbsc-card-header>
            <mbsc-card-title class="mbsc-bold">Title</mbsc-card-title>
            <mbsc-card-subtitle>Subtitle</mbsc-card-subtitle>
        </mbsc-card-header>
        <mbsc-card-content>
             Content
        </mbsc-card-content>
    </mbsc-card>
    
    <mbsc-card collapsible>
        <mbsc-card-header>
            <mbsc-card-title class="mbsc-bold">Title 2</mbsc-card-title>
            <mbsc-card-subtitle>Subtitle</mbsc-card-subtitle>
        </mbsc-card-header>
        <mbsc-card-content>
             Content
        </mbsc-card-content>
    </mbsc-card>
    
    <!-- ... -->
</mbsc-accordion>