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 <mobiscroll.Accordion> component for initialization.

Accordion with form groups
<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>
Accordion with cards
<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>