General
Getting Started
Quick Install
Using with Cordova
Using with Vue.js
Using with Stencil.js
Mobiscroll CLI
ES6 Modules
Instance
Customizing the Look and Feel
Upgrade From Trial
Utility functions
Typings
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
Simply put the mbsc-accordion attribute on the container element. The accordion will be automatically initialized when the page is loaded.
Accordion with form groups
<div mbsc-accordion>
<div class="mbsc-form-group" data-collapsible>
<div class="mbsc-form-group-title">
Form group title
</div>
<div class="mbsc-form-group-content">
Form Group content...
</div>
</div>
<div class="mbsc-form-group" data-collapsible>
<div class="mbsc-form-group-title">
Form group title
</div>
<div class="mbsc-form-group-content">
Form Group content...
</div>
</div>
<!-- ... -->
</div>Accordion with
<div mbsc-accordion>
<div mbsc-card data-collapsible data-open>
<div class="mbsc-card-header">
<div class="mbsc-card-title">Card title</div>
<div class="mbsc-card-subtitle">Card subtitle</div>
</div>
<div class="mbsc-card-content">
Card content...
</div>
</div>
<div mbsc-card data-collapsible>
<div class="mbsc-card-header">
<div class="mbsc-card-title">Card title</div>
<div class="mbsc-card-subtitle">Card subtitle</div>
</div>
<div class="mbsc-card-content">
Card content...
</div>
</div>
<!-- ... -->
</div>For many more examples - simple and complex use-cases - check out the accordion demos for javascript.