Accordion
Basic Accordion
<div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body">...</div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body">...</div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body">...</div> </div> </div></div>
Custom Accordion Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem cumque distinctio dolor dolore dolorem dolores error fugit hic ipsam magnam magni maxime minima nobis officia omnis perspiciatis, quasi quis ratione sunt? Deserunt distinctio eligendi et ipsum obcaecati repudiandae. Aperiam at consequuntur dignissimos, dolorem eaque earum exercitationem fugit perspiciatis ratione veritatis? Ad culpa facere numquam? A architecto, aut cum deleniti dignissimos distinctio dolor dolores ducimus ea, error esse ex illum impedit ipsum maiores minima mollitia nihil odit officiis omnis repudiandae rerum saepe sapiente sed sint ullam vel velit veritatis vitae voluptatibus. Blanditiis harum laborum, magni nisi nulla provident quae rem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem cumque distinctio dolor dolore dolorem dolores error fugit hic ipsam magnam magni maxime minima nobis officia omnis perspiciatis, quasi quis ratione sunt? Deserunt distinctio eligendi et ipsum obcaecati repudiandae. Aperiam at consequuntur dignissimos, dolorem eaque earum exercitationem fugit perspiciatis ratione veritatis? Ad culpa facere numquam? A architecto, aut cum deleniti dignissimos distinctio dolor dolores ducimus ea, error esse ex illum impedit ipsum maiores minima mollitia nihil odit officiis omnis repudiandae rerum saepe sapiente sed sint ullam vel velit veritatis vitae voluptatibus. Blanditiis harum laborum, magni nisi nulla provident quae rem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem cumque distinctio dolor dolore dolorem dolores error fugit hic ipsam magnam magni maxime minima nobis officia omnis perspiciatis, quasi quis ratione sunt? Deserunt distinctio eligendi et ipsum obcaecati repudiandae. Aperiam at consequuntur dignissimos, dolorem eaque earum exercitationem fugit perspiciatis ratione veritatis? Ad culpa facere numquam? A architecto, aut cum deleniti dignissimos distinctio dolor dolores ducimus ea, error esse ex illum impedit ipsum maiores minima mollitia nihil odit officiis omnis repudiandae rerum saepe sapiente sed sint ullam vel velit veritatis vitae voluptatibus. Blanditiis harum laborum, magni nisi nulla provident quae rem!
<div class="accordion custom-accordion"> <div class="accordion-row open"> <a href="#" class="accordion-header"> <span>Accordion 1</span> <i class="accordion-status-icon close fa fa-chevron-up"></i> <i class="accordion-status-icon open fa fa-chevron-down"></i> </a> <div class="accordion-body">...</div> </div> <div class="accordion-row"> <a href="#" class="accordion-header"> <span>Accordion 2</span> <i class="accordion-status-icon close fa fa-chevron-up"></i> <i class="accordion-status-icon open fa fa-chevron-down"></i> </a> <div class="accordion-body">...</div> </div> <div class="accordion-row"> <a href="#" class="accordion-header"> <span>Accordion 3</span> <i class="accordion-status-icon close fa fa-chevron-up"></i> <i class="accordion-status-icon open fa fa-chevron-down"></i> </a> <div class="accordion-body">...</div> </div></div>
Accordion Primary
Add the .accordion-primary
class to use.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Accordion Secondary
Add the .accordion-secondary
class to use.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Accordion Success
Add the .accordion-succcess
class to use.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Accordion Warning
Add the .accordion-warning
class to use.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem cumque distinctio dolor dolore dolorem dolores error fugit hic ipsam magnam magni maxime minima nobis officia omnis perspiciatis, quasi quis ratione sunt? Deserunt distinctio eligendi et ipsum obcaecati repudiandae. Aperiam at consequuntur dignissimos, dolorem eaque earum exercitationem fugit perspiciatis ratione veritatis? Ad culpa facere numquam? A architecto, aut cum deleniti dignissimos distinctio dolor dolores ducimus ea, error esse ex illum impedit ipsum maiores minima mollitia nihil odit officiis omnis repudiandae rerum saepe sapiente sed sint ullam vel velit veritatis vitae voluptatibus. Blanditiis harum laborum, magni nisi nulla provident quae rem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Accordion Danger
Add the .accordion-danger
class to use.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Accordion Info
Add the .accordion-info
class to use.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, deleniti dolore dolorem eos hic inventore iure natus nesciunt odio placeat repudiandae sunt unde vero voluptate voluptatem! Animi commodi cumque deleniti earum enim esse est exercitationem fuga, in itaque libero mollitia nam nostrum optio praesentium quis quisquam quo repudiandae velit voluptate.