General
Getting Started
Quick Install
Using with Cordova
Using with Ionic
Using with Meteor
Mobiscroll CLI
ES6 Modules
Instance
Customizing the Look and Feel
Upgrade From Trial
Utility functions
Update version
Upgrade Guide v4
Date & Time pickers
Event Calendar
Form components
Accordion
Alerts & Notifications
Buttons
Checkbox
Dropdown
Forms
Progress
Radio Buttons
Rating
Segmented
Slider
Stepper
Switch
Textfields
Timer
Responsive list
Numeric pickers
Pickers & dropdowns
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>For many more examples - simple and complex use-cases - check out the accordion demos for react.