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
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-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>