Cur luba manducare? Pol, a bene ionicis tormento. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.
Accordion
Metro 4 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.
Header 1
Header 2
Wildly open a starship. Belay, ye small wench- set sails for hunger! Springy, juicy pudding is best blended with whole ice water.
Header 3
Bitter turkey can be made tasty by brushing with sweet chili sauce. Popcorn combines greatly with grey peanut butter.
<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"
Header 1
Cur luba manducare? Pol, a bene ionicis tormento. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.
Header 2
Wildly open a starship. Belay, ye small wench- set sails for hunger! Springy, juicy pudding is best blended with whole ice water.
Header 3
Bitter turkey can be made tasty by brushing with sweet chili sauce. Popcorn combines greatly with grey peanut butter.
<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
Header 1
Cur luba manducare? Pol, a bene ionicis tormento...
Header 2
Wildly open a starship. Belay, ye small wench- set...
Header 3
Bitter turkey can be made tasty by brushing with...
<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.
Header 1
Cur luba manducare? Pol, a bene ionicis tormento. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.
Header 2
Wildly open a starship. Belay, ye small wench- set sails for hunger! Springy, juicy pudding is best blended with whole ice water.
Header 3
Bitter turkey can be made tasty by brushing with sweet chili sauce. Popcorn combines greatly with grey peanut butter.
<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.
Header 1
Cur luba manducare? Pol, a bene ionicis tormento. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.
Header 2
Wildly open a starship. Belay, ye small wench- set sails for hunger! Springy, juicy pudding is best blended with whole ice water.
Header 3
Bitter turkey can be made tasty by brushing with sweet chili sauce. Popcorn combines greatly with grey peanut butter.
<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>