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.
<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>
<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>
For many more examples - simple and complex use-cases - check out the accordion demos for angular.