Accordions let you create collapsible content. They allow you to show blocks of texts within collapsible items, clicking which collapse/show the texts. This saves you a lot of space on your webpage and enhances UX.
Accordions are great for FAQ pages. You can show your website visitors one answer at a time, which will not just save webpage space, it will also keep your visitors focused on what is important to them. This way, they can easily find an answer.
Accordions can also be used for displaying product descriptions or for explaining the services on your company website. You can also display tutorials or how-to guides on your site using them.
What makes accordions so special is that they can make the content on your webpage much more organized, making the webpage clean and user-friendly.
Making accordions is easy. But if you don’t know much about coding or if you think you can make amazing accordions with Bootstrap but you don’t have the time, you can use the free Bootstrap accordions available on the Internet.
In this blog post, I have collected the best free Bootstrap accordions and have briefly explained them. I hope you’ll find this collection useful.
Bootstrap Accordion FAQ by John Fink
This is an amazingly simple accordion made with Bootstrap, a pen by John Fink. This is suitable for the FAQ section on your website, although you can use it for other purposes, too. The texts are in black. The background color of the answers is white while the questions have a light grey background color. The entire component looks cool because of the white and light grey color combination and the thin border.
Bootstrap Accordion with JS cookie by Noriyo Akita
This Bootstrap accordion with JS cookie is a nice accordion, a pen by Noriyo Akita. Each collapsible list group item is an <a> element, i.e. a link. Their background color is light grey. On clicking these links, the accordion panels open smoothly. These panels have unordered lists of different items. This accordion retains collapse state even if the page is refreshed. If you’re looking for this kind of accordion, you can use it today.
Bootstrap Accordion with Search Query Reference Guide by Chris Lane Jones
This Bootstrap accordion is an advanced accordion with nice features, made by Chris Lane Jones. There is a search box above the collapsible content. The panel titles are the names of animals. Their background color is light green. These titles are actually links. The <a> element has been used for the titles. Upon clicking the panel titles, the panels smoothly open and close. The search query displays the sections that match the search terms. For example, if you type ‘legless’ in the search box, only the section with the title ‘snake’ will be displayed and the other sections won’t be shown.
Bootstrap Accordion by Evan Yamanishi
The Bootstrap accordion made by Evan Yamanishi shows three chapters. Each chapter will collapse or will become visible when the chapter titles are clicked. You can display an eBook or a guide in collapsible content using an accordion.
In this accordion developed by Evan Yamanishi, each panel contains a few links. There’s an icon in each panel title, which indicates open/close. Upon clicking the panel titles, the icons change.
Bootstrap Accordion using Handlebar JS by Deepak
This Bootstrap accordion, a pen by Deepak, has been developed using Handlebar JS. It contains a sample text. There are questions and answers in this accordion. The questions are in red. You can change the text color of the questions and the answers. So if you need to create this kind of collapsible content, you can use this accordion on your website and can always change text colors, background colors, etc.
Bootstrap Accordion Table by Jayadev Akkiraju
This is a Bootstrap accordion table. It has been developed by Jayadev Akkiraju. If you need to have a table on your website with collapsible content, this accordion table would be great for you. If necessary, you can add more columns from the code.
This accordion table has three columns and 4 rows. And there are also headings for each column. By clicking the ‘show details’ button, the user can see more details. When the ‘show details’ button of a row is clicked, the row expands and more details appear within the row. You can change everything in this table so that it meets your requirements. These buttons look cool.
Bootstrap Accordion Collapse Icons by Abhijith Hebbar K
If you need to create collapsible content, you do not have to write the code from scratch and you also don’t have to hire someone to create an accordion for you, you yourself can do it by using the Bootstrap accordion made by Abhijith Hebbar K. The background color of the panel title and the accordion panels are white. The panel titles have thin borders. So the accordion looks very clean. Like the other Bootstrap accordions mentioned in this post, this one is also free to use.
Bootstrap Accordion and Tab by Kamba
This is a Bootstrap accordion that comes with tabs. There are two tabs. Under each tab, there is collapsible content. When you click on another tab, a different collapsible content appears. This is a more advanced accordion when compared to the accordions that have been explained so far in this article. This sample has been made by Kamba. Each panel title has a ‘+’ or ‘-’ sign. When a panel is in the closed state, you can see the ‘+’ symbol in the panel title and when it’s in open state, the symbol changes to ‘-’.
Bootstrap Accordion by Ornob
This Bootstrap accordion made by Ornob looks very modern. But not everyone likes this kind of bright colors. So if you want, you can change the color to some other color that is easy on the eye. The background color of the panel titles is light green. When the titles are clicked, the panels containing some text open smoothly with a vertical scroll bar. When a title is clicked again, the panel closes smoothly.
Bootstrap Accordion by Ibrahim Haouari
Bootstrap accordion made by Ibrahim Haouari is an awesome accordion. It has three group items. When you click the group item titles, the panels containing some text open up and on clicking them again, they collapse in a beautiful manner. There are small arrow icons beside each group item title, which indicate open/close state of the accordion panels. The color of the accordion panel texts and panel title texts is white while there are dark colors in the background making the texts bright.
Simple Bootstrap Accordion by Soberdash
This is an amazing Bootstrap accordion developed by Soberdash. As the name says, it’s a simple Bootstrap accordion with a high-standard design. Any kind of complexity has been avoided so that the user find it easy to use it. The background color of the webpage is very interesting, it’s deep green while the background color of the panels is white. The background color of the panel titles is close to white, it’s actually very, very light grey. But this color combination is awesome. This accordion has three collapsible group items. You can always add more if required.
jQuery/Bootstrap Accordion by Jessica
This jQuery/Bootstrap accordion made by Jessica is a pretty advanced accordion. It’s advanced in the sense that within the collapsible content, there are other sections of collapsible content. More specifically, this accordion has two panel groups. Within each panel group, there are 2-3 panel groups. This kind of nesting makes the content more organized. But a nesting with many levels will confuse the user. So instead of deep nesting, I suggest you have a simple nesting on your website.
Custom Bootstrap Accordion by Timothy Long
This custom Bootstrap accordion developed by Timothy Long has three collapsible group items. If you require more, you can add more group items from the code. Each group item title starts with ‘+’/’-’. When a particular accordion panel collapses, the symbol changes to ‘+’ and when it opens, the symbol changes to ‘-’. The color of the group item title texts is blue while the panel’s text color is black. If necessary, you can add more functionality such as search but do it only if that’s necessary.
Custom Bootstrap Accordion by Jason Derifaj
This custom Bootstrap accordion has been developed by Jason Derifaj. It also has three collapsible group items. Each item contains some text. Although making this kind of accordion is easy, you can use this one to save some time. The coding is not that much complex. Anyone with some basic web development skills can build this sort of accordions using Bootstrap. If you want to use this accordion on your website, you may need to modify it. The panel texts and the panel title texts can be changed. So if you’re going to use this accordion, make the necessary modifications, and it will be suitable for your website.
Bootstrap Accordion with Vertical Step Inside by Asrul Nur Rahim
This Bootstrap accordion has been developed by Asrul Nur Rahim. As the name suggests, it has a level of collapsible content inside this collapsible content. The panel titles are two logos with the texts ‘BCA’ and ‘mandiri’, you can change them anytime. When you click on any of these logos, two collapsible group items appear, clicking which opens panels that contain step-by-step instructions. The steps in these instruction texts are given with numbering.
Bootstrap Accordion with Arrow in Vanilla JS by Ranjan Prajapati
This is a useful Bootstrap accordion made by Ranjan Prajapati. As the name implies, each collapsible group item has a little arrow that indicates open/close state. The arrow symbols change when the panel titles are clicked. Vanilla JS has been used in this accordion. Each group item contains some text in a panel. The panel titles are ‘Collapsible Group Item #1’, ‘Collapsible Group Item #2’, and ‘Collapsible Group Item #3’. This accordion does not have any fancy design. Rather, it has texts with just white backgrounds.
Bootstrap Accordion by made-dev
The Bootstrap accordion made by made-dev is different from the other accordions mentioned in this post. It’s different in the sense that you don’t have to click the panel titles to open or close the panels. Hovering your mouse over the panel titles will do. So if you want to open a particular panel, just keep your mouse cursor over the panel title, and the panel will open up. And to close it, simply hover your mouse over other panel titles. This saves the users a lot of efforts as they don’t have to click.
Bootstrap Accordion by Sushill
The Bootstrap accordion by Sushill has four collapsible group items, each of which has text explaining HTML, Bootstrap, CSS, etc. Clicking on a particular heading text will expand the corresponding accordion panel. To collapse the panel, click the heading text again or click on other heading texts. This example of accordion demonstrates how you can display tutorials in an accordion. As you can see, the accordion has made the content much more organized. It has made it easy for the user to read what they want to read. If they want to know about Bootstrap, they can simply click the respective heading text. They don’t have to scroll down a large amount of text to read that section of text.
Bootstrap Accordion by Jagathish
This Bootstrap accordion is a simple accordion developed by Jagathish. It does not have many features, but it’s very useful. If you’re interested in creating a very simple collapsible content, you can take a look at this accordion. The panel titles and the accordion panels contain sample texts. You have to change them to meaningful and appropriate texts. You can do it from the code. See the code and replace the existing group item title texts and the accordion panel texts with your own texts.
Bootstrap Accordion by Khadar Hassan
The Bootstrap accordion made by Khadar Hassan contains three questions and their answers. The questions’ text color is white when the background color is blue. The questions are in a different language. So if you’re interested in having such an accordion containing questions and answers on your website, you can use the code from this sample. But you need to change the questions and replace the answers with your own answers. You can also make other changes as per your preferences.
What’s on your mind?
In this article, I have given you a list of the best free Bootstrap accordions and have explained them in short with screenshots.
All these Bootstrap accordions are free to use. If you like any of them, go ahead and use them on your website, and do not forget to tell me in the comments section which ones have drawn your attention.
So among the accordions listed in this post, which ones have impressed you? And have you developed such accordions?