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 <mobiscroll.Accordion>
component for initialization.
<mobiscroll.Accordion>
<mobiscroll.FormGroup ref="mbsc" collapsible open>
<mobiscroll.FormGroupTitle>
Title
</mobiscroll.FormGroupTitle>
<mobiscroll.FormGroupContent>
Form group content...
</mobiscroll.FormGroupContent>
</mobiscroll.FormGroup>
<mobiscroll.FormGroup ref="mbsc" collapsible>
<mobiscroll.FormGroupTitle>
Title 2
</mobiscroll.FormGroupTitle>
<mobiscroll.FormGroupContent>
Form group content...
</mobiscroll.FormGroupContent>
</mobiscroll.FormGroup>
//...
</mobiscroll.Accordion>
<mobiscroll.Accordion>
<mobiscroll.Card collapsible>
<mobiscroll.CardHeader>
<mobiscroll.CardTitle>Title</mobiscroll.CardTitle>
<mobiscroll.CardSubtitle>Subtitle</mobiscroll.CardSubtitle>
</mobiscroll.CardHeader>
<mobiscroll.CardContent>
Card contetnt...
</mobiscroll.CardContent>
</mobiscroll.Card>
<mobiscroll.Card collapsible>
<mobiscroll.CardHeader>
<mobiscroll.CardTitle>Title 2</mobiscroll.CardTitle>
<mobiscroll.CardSubtitle>Subtitle</mobiscroll.CardSubtitle>
</mobiscroll.CardHeader>
<mobiscroll.CardContent>
Card contetnt...
</mobiscroll.CardContent>
</mobiscroll.Card>
//...
</mobiscroll.Accordion>
For many more examples - simple and complex use-cases - check out the accordion demos for react.