Accordion
code
example 1 code
<div id="accordion" class=" w-100 float-left"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link float-left w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Lorem ipsum </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> Quisque egestas nibh vel ante eleifend, ac venenatis diam rhoncus. Proin sit amet lacus non nisi convallis ultrices ac vel diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nunc, pharetra non justo id, hendrerit dictum quam. Nullam ut dui tempus, pretium erat ac, fringilla ligula. </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed float-left w-100 text-left" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Quisque purus </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> Quisque lacinia dolor enim. Nulla facilisi. Integer at aliquam magna. Quisque metus purus, vulputate non dolor sit amet, iaculis finibus nibh. Cras ac elit viverra, dignissim neque ut, interdum orci. Quisque venenatis neque at quam finibus, a molestie urna porttitor. Nunc a sem dapibus nisl aliquet aliquam sed pretium ipsum. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed float-left w-100 text-left" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Nulla iaculis tellus </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"> <div class="card-body"> Suspendisse tristique arcu at diam fringilla elementum. In in velit quis nulla pulvinar aliquam eu et diam. Curabitur lacinia euismod molestie. Vivamus blandit aliquet sodales. Cras pulvinar risus ut vehicula commodo. Sed eget odio ullamcorper, rhoncus libero non, scelerisque leo. Donec id accumsan lectus, sit amet aliquet massa. </div> </div> </div> </div>
example 2 code
<div id="accordion1" class=" w-100 float-left"> <div class="card"> <div class="card-header" id="headingOne1"> <h5 class="mb-0"> <button class="btn btn-link float-left w-100 text-left" data-toggle="collapse" data-target="#collapseOne1" aria-expanded="true" aria-controls="collapseOne"> Lorem ipsum </button> </h5> </div> <div id="collapseOne1" class="collapse show" aria-labelledby="headingOne1" data-parent="#accordion1"> <div class="card-body"> Quisque egestas nibh vel ante eleifend, ac venenatis diam rhoncus. Proin sit amet lacus non nisi convallis ultrices ac vel diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nunc, pharetra non justo id, hendrerit dictum quam. Nullam ut dui tempus, pretium erat ac, fringilla ligula. </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo1"> <h5 class="mb-0"> <button class="btn btn-link collapsed float-left w-100 text-left" data-toggle="collapse" data-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo"> Quisque purus </button> </h5> </div> <div id="collapseTwo1" class="collapse" aria-labelledby="headingTwo1" data-parent="#accordion1"> <div class="card-body"> Quisque lacinia dolor enim. Nulla facilisi. Integer at aliquam magna. Quisque metus purus, vulputate non dolor sit amet, iaculis finibus nibh. Cras ac elit viverra, dignissim neque ut, interdum orci. Quisque venenatis neque at quam finibus, a molestie urna porttitor. Nunc a sem dapibus nisl aliquet aliquam sed pretium ipsum. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree1"> <h5 class="mb-0"> <button class="btn btn-link collapsed float-left w-100 text-left" data-toggle="collapse" data-target="#collapseThree1" aria-expanded="false" aria-controls="collapseThree"> Nulla iaculis tellus </button> </h5> </div> <div id="collapseThree1" class="collapse" aria-labelledby="headingThree1" data-parent="#accordion1"> <div class="card-body"> Suspendisse tristique arcu at diam fringilla elementum. In in velit quis nulla pulvinar aliquam eu et diam. Curabitur lacinia euismod molestie. Vivamus blandit aliquet sodales. Cras pulvinar risus ut vehicula commodo. Sed eget odio ullamcorper, rhoncus libero non, scelerisque leo. Donec id accumsan lectus, sit amet aliquet massa. </div> </div> </div> </div>
accordion example 1 (default)
Quisque egestas nibh vel ante eleifend, ac venenatis diam rhoncus. Proin sit amet lacus non nisi convallis ultrices ac vel diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nunc, pharetra non justo id, hendrerit dictum quam. Nullam ut dui tempus, pretium erat ac, fringilla ligula.
Quisque lacinia dolor enim. Nulla facilisi. Integer at aliquam magna. Quisque metus purus, vulputate non dolor sit amet, iaculis finibus nibh. Cras ac elit viverra, dignissim neque ut, interdum orci. Quisque venenatis neque at quam finibus, a molestie urna porttitor. Nunc a sem dapibus nisl aliquet aliquam sed pretium ipsum.
Suspendisse tristique arcu at diam fringilla elementum. In in velit quis nulla pulvinar aliquam eu et diam. Curabitur lacinia euismod molestie. Vivamus blandit aliquet sodales. Cras pulvinar risus ut vehicula commodo. Sed eget odio ullamcorper, rhoncus libero non, scelerisque leo. Donec id accumsan lectus, sit amet aliquet massa.
accordion example 2 (with icon)
Quisque egestas nibh vel ante eleifend, ac venenatis diam rhoncus. Proin sit amet lacus non nisi convallis ultrices ac vel diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nunc, pharetra non justo id, hendrerit dictum quam. Nullam ut dui tempus, pretium erat ac, fringilla ligula.
Quisque lacinia dolor enim. Nulla facilisi. Integer at aliquam magna. Quisque metus purus, vulputate non dolor sit amet, iaculis finibus nibh. Cras ac elit viverra, dignissim neque ut, interdum orci. Quisque venenatis neque at quam finibus, a molestie urna porttitor. Nunc a sem dapibus nisl aliquet aliquam sed pretium ipsum.
Suspendisse tristique arcu at diam fringilla elementum. In in velit quis nulla pulvinar aliquam eu et diam. Curabitur lacinia euismod molestie. Vivamus blandit aliquet sodales. Cras pulvinar risus ut vehicula commodo. Sed eget odio ullamcorper, rhoncus libero non, scelerisque leo. Donec id accumsan lectus, sit amet aliquet massa.

Subscribe to our Newsletter