Start building up your website using the collection of the accordions, made from Javascript plugins by bootstrap itself. The designer can use it for hiding and showing any content. If they want some content to be visible after clicking it, then this collapsing accordion is required.
However, one can easily modify and change the design. It is an entirely open source project, specially made for the designers. Here, one can find different accordion website templates for designing creative website easy and fast.
Things get more beautiful when you can use the icons matching to your website's look and feel. With same thought Bootstrap Rev introduce the materialistic accordion designs in which designers can easily change the icon using any thirdparty icons library.
Having materialistic and creative components in your werbsite is the trend. So, why not stay ahead with trend yet speed up your design work with bootstrap rev accordion components. Materialistic accordion comes with nice and smooth shadow to give it clean and classy look. We are providing another feature which is customized icons. Now you can use any icon in the accordion without any complex css code and you can even remore it by deleting simple html code of two lines.
Add accordion-s1 class in the parent div of your accordion to choose Material design of your accordion.
Add accordion-icon class in the parent div of accordion to use the customized icons.
Note: Removing accordion-icon class will show default icons of bootstrap.
Simply replace the bi bi-plus class with the class of the icons you want to use as default icon.
Note: is-collapse class is used to hide and show the icons on the collapse. Removing them won't let the accordion work as expected.
Replace the bi bi-dash class with the class of the icons you want to use as secondry visible icon.
Note: not-collapse class is used to hide the icon by default. Removing it won't let the icons appear as you expect.
<div class="container">
<div class="accordion accordion-icon accordion-s1" id="accordionOneph">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOneph">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneph" aria-expanded="true" aria-controls="collapseOneph">
<span>Accordion Item #1</span><i class="bi bi-plus is-collapse"></i><i class="bi bi-dash not-collapse"></i>
</button>
</h2>
<div id="collapseOneph" class="accordion-collapse collapse show" aria-labelledby="headingOneph" data-bs-parent="#accordionOneph">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, repellendus quo. Perspiciatis vitae veniam natus aliquid distinctio assumenda esse minima voluptas a, aperiam est dolorem dicta possimus? Maiores facilis, vero!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwoph">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwoph" aria-expanded="false" aria-controls="collapseTwoph">
<span>Accordion Item #2</span><i class="bi bi-plus is-collapse"></i><i class="bi bi-dash not-collapse"></i>
</button>
</h2>
<div id="collapseTwoph" class="accordion-collapse collapse" aria-labelledby="headingTwoph" data-bs-parent="#accordionOneph">
<div class="accordion-body">
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Corporis mollitia voluptas ipsum, nulla ad nesciunt optio, ullam corrupti perferendis maiores. Officiis, eveniet corrupti deleniti exercitationem sit, ad beatae sed deserunt?
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThreeph">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThreeph" aria-expanded="false" aria-controls="collapseThreeph">
<span>Accordion Item #3</span><i class="bi bi-plus is-collapse"></i><i class="bi bi-dash not-collapse"></i>
</button>
</h2>
<div id="collapseThreeph" class="accordion-collapse collapse" aria-labelledby="headingThreeph" data-bs-parent="#accordionOneph">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum ad nesciunt necessitatibus earum accusantium aperiam iste laboriosam nostrum adipisci laudantium, molestias excepturi quod voluptates. Tempore deserunt, aut ipsa distinctio illo.
</div>
</div>
</div>
</div>
</div>
What if you are making a flat theme or website? Materilized accordion will not not work go the website look and feel. That thought lead us to introduce flat accodion style to complete your needs. It's minimal flat design gives the rich minimilistic clean look to the component. Apart from that you still have the feature to update or remove the icons of the accordion as per your need.
Add accordion-s2 class in the parent div of your accordion to choose Material design of your accordion.
Add accordion-icon class in the parent div of accordion to use the customized icons.
Note: Removing accordion-icon class will show default icons of bootstrap.
Simply replace the bi bi-plus class with the class of the icons you want to use as default icon.
Note: is-collapse class is used to hide and show the icons on the collapse. Removing them won't let the accordion work as expected.
Replace the bi bi-dash class with the class of the icons you want to use as secondry visible icon.
Note: not-collapse class is used to hide the icon by default. Removing it won't let the icons appear as you expect.
<div class="container">
<div class="accordion accordion-flush accordion-icon accordion-s2" id="accordionTwoph">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne1ph">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne1ph" aria-expanded="true" aria-controls="collapseOne1ph">
<span>Accordion Item #1</span><i class="i bi-chevron-down is-collapse"></i><i class="i bi-chevron-up not-collapse"></i>
</button>
</h2>
<div id="collapseOne1ph" class="accordion-collapse collapse show" aria-labelledby="headingOne1ph" data-bs-parent="#accordionTwoph">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, repellendus quo. Perspiciatis vitae veniam natus aliquid distinctio assumenda esse minima voluptas a, aperiam est dolorem dicta possimus? Maiores facilis, vero!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo2ph">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2ph" aria-expanded="false" aria-controls="collapseTwo2ph">
<span>Accordion Item #2</span><i class="i bi-chevron-down is-collapse"></i><i class="i bi-chevron-up not-collapse"></i>
</button>
</h2>
<div id="collapseTwo2ph" class="accordion-collapse collapse" aria-labelledby="headingTwo2ph" data-bs-parent="#accordionTwoph">
<div class="accordion-body">
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Corporis mollitia voluptas ipsum, nulla ad nesciunt optio, ullam corrupti perferendis maiores. Officiis, eveniet corrupti deleniti exercitationem sit, ad beatae sed deserunt?
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree3ph">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree3ph" aria-expanded="false" aria-controls="collapseThree3ph">
<span>Accordion Item #3</span><i class="i bi-chevron-down is-collapse"></i><i class="i bi-chevron-up not-collapse"></i>
</button>
</h2>
<div id="collapseThree3ph" class="accordion-collapse collapse" aria-labelledby="headingThree3ph" data-bs-parent="#accordionTwoph">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum ad nesciunt necessitatibus earum accusantium aperiam iste laboriosam nostrum adipisci laudantium, molestias excepturi quod voluptates. Tempore deserunt, aut ipsa distinctio illo.
</div>
</div>
</div>
</div>
</div>