materialx-yoo

<!DOCTYPE html> <html class="no-js" lang="en"> <head>  <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="author" content="YooKits" />  <title>Components - Collapse</title>  <link rel="icon" href="assets/img/favicon.png">  <link rel="stylesheet" type="text/css" href="assets/css/material-icons.css" /> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="assets/css/materialX.css" /> </head> <body> <div class="yoo-height-b60 yoo-height-lg-b60"></div> <header class="yoo-header yoo-style1 yoo-sticky-menu"> <div class="yoo-main-header"> <div class="yoo-main-header-in"> <div class="yoo-main-header-left"> <a href="index.html" class="yoo-logo-link yoo-light-logo"><img src="assets/img/logo.svg" alt="logo-light" /></a>   </div> <div class="yoo-main-header-right"> <div class="yoo-nav-wrap yoo-fade-up"> <div class="yoo-nav-toggle"> <i class="material-icons-outlined">more_vert</i> </div> <nav class="yoo-nav yoo-desktop-nav"> <ul class="yoo-nav-list"> <li> <a href="#"><i class="material-icons">home</i> Home</a> </li> <li> <a href="#"><i class="material-icons">folder</i> Contact</a> </li> </ul> </nav>  </div>  <ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0"> <li> <div class="yoo-search-wrap"> <form action="#" class="yoo-search yoo-style1"> <input type="text" placeholder="Search people & places" class="yoo-search-input"> <button class="yoo-search-submit"><i class="material-icons-outlined">search</i></button> </form> <span class="yoo-search-toggle-mb yoo-ex-nav-btn"><i class="material-icons-outlined">search</i></span> </div> </li> <li> <div class="yoo-toggle-body yoo-language-nav"> <div class="yoo-toggle-btn yoo-ex-nav-btn" data-ripple="ripple" data-ripple-color="#fff"> <i class="material-icons">translate</i> <span class="yoo-selected-language">English</span> <span class="yoo-language-arrow"><i class="material-icons">keyboard_arrow_down</i></span> </div> <ul class="yoo-dropdown yoo-style1"> <li> <a href="#">English</a> </li> <li> <a href="#">Русский</a> </li> <li> <a href="#">Español</a> </li> <li> <a href="#">日本語</a> </li> </ul> </div> </li> <li> <div class="yoo-toggle-body yoo-message-area yoo-style1"> <span class="yoo-toggle-btn yoo-ex-nav-btn yoo-message-btn"> <i class="material-icons">email</i> </span> <div class="yoo-dropdown yoo-notify-dropdown"> <h2 class="yoo-nofify-title"> <span class="yoo-nofify-title-left">Messages</span> <span class="yoo-nofify-title-right"><a href="#">Mark All as Read</a></span> </h2> <ul class="yoo-nofify-list yoo-style1 yoo-mp0"> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/1.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Bob Dylan <span class="yoo-online-status yoo-live"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">10:23</span> </div> </a> </li> <li> <a href="#" class="active"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/2.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> David Gilmour <span class="yoo-online-status"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">12:23</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/3.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Jeff Beck <span class="yoo-online-status yoo-live"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 05</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/4.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Guthrie Govan <span class="yoo-online-status"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 10</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/5.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Eric Johnson <span class="yoo-online-status"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 16</span> </div> </a> </li> </ul> <a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a> </div> </div> </li> <li> <div class="yoo-toggle-body yoo-notice-area yoo-style1"> <span class="yoo-toggle-btn yoo-ex-nav-btn yoo-notice-btn"> <i class="material-icons">notifications</i> <span class="yoo-ex-nav-label">3</span> </span> <div class="yoo-dropdown yoo-notify-dropdown"> <h2 class="yoo-nofify-title">Notification</h2> <ul class="yoo-nofify-list yoo-style1 yoo-mp0"> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-purple-box"> <i class="material-icons-outlined">supervisor_account</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">Invite your friends to dashboard.</h3> <span class="yoo-notify-time">5 hour ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-green-box"> <i class="material-icons-outlined">calendar_today</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">3 Tasks pending this month.</h3> <span class="yoo-notify-time">6 hour ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-blue-box"> <i class="material-icons-outlined">favorite_border</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">7 People loved your activity.</h3> <span class="yoo-notify-time">9 hour ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-purple-box"> <i class="material-icons-outlined">chat_bubble_outline</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">John commented on activity.</h3> <span class="yoo-notify-time">1 day ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-indigo-box"> <img src="assets/img/user/1.jpg" alt="msg1" /> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">Click your picture or add an account.</h3> <span class="yoo-notify-time">2 days ago</span> </div> </a> </li> </ul> <a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a> </div> </div> </li> <li> <div class="yoo-toggle-body yoo-profile-nav yoo-style1"> <div class="yoo-toggle-btn yoo-profile-nav-btn"> <div class="yoo-profile-nav-text"> <span>Welcome,</span> <h4>Thom Yorke</h4> </div> <div class="yoo-profile-nav-img"> <img src="assets/img/profile-pic.png" alt="profile"> </div> </div> <ul class="yoo-dropdown yoo-style1"> <li> <a href="#"><i class="material-icons">account_circle</i>My Profile</a> </li> <li> <a href="#"><i class="material-icons">settings</i>Settings</a> </li> <li> <a href="#"><i class="material-icons">videocam</i>Upload</a> </li> <li> <a href="#"><i class="material-icons">help</i>Help</a> </li> <li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li> </ul> </div> </li> </ul> </div> </div> </div> </header> <div class="yoo-sidebarheader-toggle"> <div class="yoo-button-bar1"></div> <div class="yoo-button-bar2"></div> <div class="yoo-button-bar3"></div> </div> <div class="yoo-sidebarheader"> <div class="yoo-add"> <div class="yoo-add-in"> <a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template" class="yoo-add-thumb"> <img src="assets/img/MATERIAL-X-3.png" alt="MaterialXPro"> </a> <h2 class="yoo-add-title"><a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template">Go Pro & unlock 100+ more UI components & pages.</a></h2> <a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template" class="yoo-add-btn btn btn-success btn-sm">Show Me</a> </div> </div> <div class="yoo-sidebarheader-in" data-scrollbar> <div class="yoo-sidebar-nav"> <ul class="yoo-sidebar-nav-list yoo-mp0"> <li> <a href="index.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">dashboard</i></span> <span class="yoo-sidebar-link-text">Dashboard</span> </span> </a> </li> <li> <a href="settings.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">settings</i></span> <span class="yoo-sidebar-link-text">Profile Settings</span> </span> </a> </li> <li> <a href="calender.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">event_note</i></span> <span class="yoo-sidebar-link-text">Calender</span> </span> </a> </li> <li class="yoo-sidebar-has-children"> <a href="#" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">account_circle</i></span> <span class="yoo-sidebar-link-text">Sign In/Sign Up</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="login.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Log In</span> </span> </a> </li> <li> <a href="login.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Sign Up</span> </span> </a> </li> </ul> </li> <li> <a href="alerts.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">insert_drive_file</i></span> <span class="yoo-sidebar-link-text">Notifications</span> </span> </a> </li> <li> <a href="button.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">folder</i></span> <span class="yoo-sidebar-link-text">Buttons</span> </span> </a> </li> <li> <a href="tables.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">table_chart</i></span> <span class="yoo-sidebar-link-text">Table</span> </span> </a> </li> <li> <a href="forms.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">add_to_photos</i></span> <span class="yoo-sidebar-link-text">Forms</span> </span> </a> </li> <li> <a href="pagination.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">flag</i></span> <span class="yoo-sidebar-link-text">Pagination</span> </span> </a> </li> <li> <a href="typography.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">font_download</i></span> <span class="yoo-sidebar-link-text">Typography</span> </span> </a> </li> <li class="yoo-sidebar-has-children"> <a href="#" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">cloud</i></span> <span class="yoo-sidebar-link-text">Components</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="badge.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Badge</span> </span> </a> </li> <li> <a href="breadcrumb.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Breadcrumb</span> </span> </a> </li> <li> <a href="card.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Card</span> </span> </a> </li> <li> <a href="carousel.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Carousel</span> </span> </a> </li> <li class="active"> <a href="collapse.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Collapse</span> </span> </a> </li> <li> <a href="dropdowns.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Dropdowns</span> </span> </a> </li> <li> <a href="list-group.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">List Group</span> </span> </a> </li> <li> <a href="modal.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Modal</span> </span> </a> </li> <li> <a href="tooltips.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Tooltips</span> </span> </a> </li> </ul> </li> <li> <a href="icons.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">archive</i></span> <span class="yoo-sidebar-link-text">Icons</span> </span> </a> </li> <li> <a href="svgmaps.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">explore</i></span> <span class="yoo-sidebar-link-text">SVG Maps</span> </span> </a> </li> <li> <a href="documentation.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">library_books</i></span> <span class="yoo-sidebar-link-text">Documentation</span> </span> </a> </li> </ul> </div> </div> </div> <div class="yoo-content yoo-style1"> <div class="container"> <div class="yoo-uikits-heading"> <ul class="yoo-breadcamb yoo-style1 yoo-mp0"> <li><a href="#">Home</a></li> <li><a href="#">Components</a></li> <li>Collapse</li> </ul> <h2 class="yoo-uikits-title">Collapse</h2> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">General Collapse</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#general-collapse"><i class="material-icons">code</i></button>  <div class="modal fade" id="general-collapse"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">General Collapse</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="material-icons">close</i> </button> </div> <div class="modal-body"> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"kit-btns"</span><span class="nt">></span> <span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-blue-gray"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">></span> Link with href <span class="nt"></a></span> <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">></span> Button with data-target <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">id=</span><span class="s">"collapseExample"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">></span> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. <span class="nt"></div></span> <span class="nt"></div></span></code></pre></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="yoo-card-body"> <div class="yoo-padd-lr-20"> <div class="yoo-height-b20 yoo-height-lg-b20"></div> <div class="kit-btns"> <a class="btn btn-blue-gray" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" data-ripple="ripple" data-ripple-color="#fff"> Link with href </a> <button class="btn btn-warning" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" data-ripple="ripple" data-ripple-color="#fff"> Button with data-target </button> </div> <div class="collapse" id="collapseExample"> <div class="yoo-height-b15 yoo-height-lg-b15"></div> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> <div class="yoo-height-b20 yoo-height-lg-b20"></div> </div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">Multiple targets</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#multiple-targets"><i class="material-icons">code</i></button>  <div class="modal fade" id="multiple-targets"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Multiple targets</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="material-icons">close</i> </button> </div> <div class="modal-body"> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"kit-btns"</span><span class="nt">></span> <span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-blue-gray"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">></span>Toggle first element<span class="nt"></a></span> <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#multiCollapseExample2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample2"</span><span class="nt">></span>Toggle second element<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">".multi-collapse"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1 multiCollapseExample2"</span><span class="nt">></span>Toggle both elements<span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse multi-collapse"</span> <span class="na">id=</span><span class="s">"multiCollapseExample1"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">></span> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse multi-collapse"</span> <span class="na">id=</span><span class="s">"multiCollapseExample2"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">></span> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></figure> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="yoo-card-body"> <div class="yoo-padd-lr-20"> <div class="yoo-height-b20 yoo-height-lg-b20"></div> <div class="kit-btns"> <a class="btn btn-blue-gray" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1" data-ripple="ripple" data-ripple-color="#fff">Toggle first element</a> <button class="btn btn-warning" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2" data-ripple="ripple" data-ripple-color="#fff">Toggle second element</button> <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2" data-ripple="ripple" data-ripple-color="#fff">Toggle both elements</button> </div> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="yoo-height-b15 yoo-height-lg-b15"></div> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="yoo-height-b15 yoo-height-lg-b15"></div> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> </div> </div> <div class="yoo-height-b20 yoo-height-lg-b20"></div> </div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">Accordion example</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#accordion-example"><i class="material-icons">code</i></button>  <div class="modal fade" id="accordion-example"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Accordion example</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="material-icons">close</i> </button> </div> <div class="modal-body"> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"accordion"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-link"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">></span> Collapsible Group Item #1 <span class="nt"></button></span> <span class="nt"></h5></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseOne"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">aria-labelledby=</span><span class="s">"headingOne"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-link collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">></span> Collapsible Group Item #2 <span class="nt"></button></span> <span class="nt"></h5></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseTwo"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">aria-labelledby=</span><span class="s">"headingTwo"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span> <span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-link collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">></span> Collapsible Group Item #3 <span class="nt"></button></span> <span class="nt"></h5></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseThree"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">aria-labelledby=</span><span class="s">"headingThree"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="yoo-card-body"> <div class="yoo-padd-lr-20"> <div class="yoo-height-b20 yoo-height-lg-b20"></div> <div id="accordion" class="accordion"> <div class="card"> <div> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div> <div class="card-header" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> </div> <div class="yoo-height-b20 yoo-height-lg-b20"></div> </div> </div> </div> </div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <footer class="yoo-footer yoo-style1"> <div class="container"> <div class="yoo-footer-content"> <div class="yoo-copyride">Made with coffee & love by <a href="https://yookits.com/" target="_blank">YooKits</a> ©All rights reserved.</div> <ul class="yoo-footer-nav yoo-mp0 yoo-flex"> <li><a href="#">About</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Sitemap</a></li> </ul> </div> </div> </footer> </div>  <script src="assets/js/jquery-1.12.4.min.js"></script> <script src="assets/js/bootstrap.bundle.min.js"></script> <script src="assets/js/smooth-scrollbar.js"></script> <script src="assets/js/materialX.js"></script> </body> </html>