metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Metro 4 has at its disposal classes and a plugin for creating an accordion element."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Accordion - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Accordion</a></li> <li class="toc-entry"><a href="#_accordion_about">About</a></li> <li class="toc-entry"><a href="#_accordion_options">Options</a></li> <li class="toc-entry"><a href="#_accordion_active_frame">Active frame</a></li> <li class="toc-entry"><a href="#_accordion_rtl">RTL support</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Accordion</h1> <p class="text-leader"> Metro 4 has at its disposal classes and a plugin for creating an accordion element. </p>  <h3 id="_accordion_about">About</h3> <p> The <code>accordion</code> is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be <code>expanded</code> to reveal the content associated with that item. </p> <div class="example"> <div data-role="accordion" id="a1"> <div class="frame"> <div class="heading">Header 1</div> <div class="content"> <div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.</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 for hunger! Springy, juicy pudding is best blended with whole ice water.</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 chili sauce. Popcorn combines greatly with grey peanut butter.</div> </div> </div> </div> </div> <pre><code class="html"> <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> </code></pre> <h4>Material design</h4> <p> You can enable material design style for accordion with attribute <code>data-material="true"</code> </p> <div class="example"> <div data-role="accordion" id="a2" 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. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.</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 for hunger! Springy, juicy pudding is best blended with whole ice water.</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 chili sauce. Popcorn combines greatly with grey peanut butter.</div> </div> </div> </div> </div> <pre><code class="html"> <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> </code></pre>  <h3 id="_accordion_options">Options</h3> <p> You can set additional options for accordion. To set option add attributes: <code>data-duration</code>, <code>data-one-frame</code>, <code>data-show-active</code>, <code>data-active-frame-class</code>, <code>data-active-heading-class</code>, <code>data-active-content-class</code>, <code>data-on-frame-open</code>, <code>data-on-frame-before-open</code>, <code>data-on-frame-close</code>, <code>data-on-frame-before-close</code>, <code>data-on-accordion-create</code>. </p> <ul> <li><strong>duration</strong> - animation duration (default: 300ms)</li> <li><strong>oneFrame</strong> - visible one frame on one time (default: true)</li> <li><strong>showActive</strong> - show active frame at startup (default: true)</li> <li><strong>activeFrameClass</strong> - custom class for active frame</li> <li><strong>activeHeadingClass</strong> - custom class for active frame heading</li> <li><strong>activeContentClass</strong> - custom class for active frame content</li> <li><strong>onFrameOpen(frame)</strong> - callback executed when frame is open</li> <li><strong>onFrameBeforeOpen(frame)</strong> - if this function return false, frame will not be open</li> <li><strong>onFrameClose(frame)</strong> - callback executed when frame is close</li> <li><strong>onFrameBeforeClose(frame)</strong> - if this function return false, frame will not be close</li> <li><strong>onAccordionCreate(frame)</strong> - callback executed when accordion created</li> </ul> <div class="example"> <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> </div> <pre><code class="html"> <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> </code></pre> <h3 id="_accordion_active_frame">Active frame</h3> <p> 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: <code>data-active-frame-class</code>, <code>data-active-heading-class</code>, <code>data-active-content-class</code>. </p> <div class="example"> <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. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.</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 for hunger! Springy, juicy pudding is best blended with whole ice water.</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 chili sauce. Popcorn combines greatly with grey peanut butter.</div> </div> </div> </div> </div> <pre><code class="html"> <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> </code></pre> <p> If you are doing a class for an active frame, you must follow the following css structure: </p> <pre><code class="css"> .accordion > .frame.active { ... } .accordion > .frame.active > .heading { ... } .accordion > .frame.active > .content { ... } </code></pre> <h3 id="_accordion_rtl">Rtl support</h3> <p> To set <code>rtl</code> add attribute <code>dir="rtl"</code> to element. </p> <div class="example"> <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. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.</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 for hunger! Springy, juicy pudding is best blended with whole ice water.</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 chili sauce. Popcorn combines greatly with grey peanut butter.</div> </div> </div> </div> </div> <pre><code class="html"> <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> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>