Accordion
Metro UI has at its disposal classes and a plugin for creating an accordion element.
About
The accordion
is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails.
Each item can be expanded
to reveal the content associated with that item.
<div data-role="accordion" data-one-frame="true" data-show-active="true">
<div class="frame">
<div class="heading">Header 1</div>
<div class="content">
<div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento...</div>
</div>
</div>
<div class="frame active">
<div class="heading">Header 2</div>
<div class="content">
<div class="p-2">Wildly open a starship. Belay, ye small wench- set...</div>
</div>
</div>
<div class="frame">
<div class="heading">Header 3</div>
<div class="content">
<div class="p-2">Bitter turkey can be made tasty by brushing with...</div>
</div>
</div>
</div>
Material design
You can enable material design style for accordion with attribute data-material="true"
<div data-role="accordion" data-material="true">
<div class="frame">
<div class="heading">Header 1</div>
<div class="content">
<div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento...</div>
</div>
</div>
<div class="frame active">
<div class="heading">Header 2</div>
<div class="content">
<div class="p-2">Wildly open a starship. Belay, ye small wench- set...</div>
</div>
</div>
<div class="frame">
<div class="heading">Header 3</div>
<div class="content">
<div class="p-2">Bitter turkey can be made tasty by brushing with...</div>
</div>
</div>
</div>
Options
You can set additional options for accordion. To set option add attributes:
data-duration
,
data-one-frame
,
data-show-active
,
data-active-frame-class
,
data-active-heading-class
,
data-active-content-class
,
data-on-frame-open
,
data-on-frame-before-open
,
data-on-frame-close
,
data-on-frame-before-close
,
data-on-accordion-create
.
- duration - animation duration (default: 300ms)
- oneFrame - visible one frame on one time (default: true)
- showActive - show active frame at startup (default: true)
- activeFrameClass - custom class for active frame
- activeHeadingClass - custom class for active frame heading
- activeContentClass - custom class for active frame content
- onFrameOpen(frame) - callback executed when frame is open
- onFrameBeforeOpen(frame) - if this function return false, frame will not be open
- onFrameClose(frame) - callback executed when frame is close
- onFrameBeforeClose(frame) - if this function return false, frame will not be close
- onAccordionCreate(frame) - callback executed when accordion created
<div data-role="accordion"
data-one-frame="false"
data-show-active="true"
data-on-frame-open="console.log('frame was opened!', arguments[0])"
data-on-frame-close="console.log('frame was closed!', arguments[0])">
<div class="frame">
<div class="heading">Header 1</div>
<div class="content">
<div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento...</div>
</div>
</div>
<div class="frame active">
<div class="heading">Header 2</div>
<div class="content">
<div class="p-2">Wildly open a starship. Belay, ye small wench- set...</div>
</div>
</div>
<div class="frame">
<div class="heading">Header 3</div>
<div class="content">
<div class="p-2">Bitter turkey can be made tasty by brushing with...</div>
</div>
</div>
</div>
Active frame
You can easy change active frame style. To change style for active frame you can create own class and then set it to one of options:
data-active-frame-class
,
data-active-heading-class
,
data-active-content-class
.
<div data-role="accordion"
data-active-heading-class="bg-cyan fg-white"
data-active-content-class="bg-dark fg-white" >
<div class="frame">
<div class="heading">Header 1</div>
<div class="content">
<div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento...</div>
</div>
</div>
<div class="frame active">
<div class="heading">Header 2</div>
<div class="content">
<div class="p-2">Wildly open a starship. Belay, ye small wench- set sails...</div>
</div>
</div>
<div class="frame">
<div class="heading">Header 3</div>
<div class="content">
<div class="p-2">Bitter turkey can be made tasty by brushing with sweet...</div>
</div>
</div>
</div>
If you are doing a class for an active frame, you must follow the following css structure:
.accordion > .frame.active {
...
}
.accordion > .frame.active > .heading {
...
}
.accordion > .frame.active > .content {
...
}
Rtl support
To set rtl
add attribute dir="rtl"
to element.
<div dir="rtl" data-role="accordion">
<div class="frame">
<div class="heading">Header 1</div>
<div class="content">
<div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento...</div>
</div>
</div>
<div class="frame active">
<div class="heading">Header 2</div>
<div class="content">
<div class="p-2">Wildly open a starship. Belay, ye small wench- set...</div>
</div>
</div>
<div class="frame">
<div class="heading">Header 3</div>
<div class="content">
<div class="p-2">Bitter turkey can be made tasty by brushing with...</div>
</div>
</div>
</div>