Collection of free Bootstrap accordion code examples. Update of March 2020 collection. 15 new items.

Related Articles

  1. CSS Accordion Menus
  2. jQuery Accordions
  3. React Accordions

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion V10

If you are into dark design or you would like to make your website more dynamic, this free dark accordion collapse template comes ideal. It is based on Bootstrap, working on all devices flawlessly.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css, jquery.js, popper.js,

Bootstrap version: 4.5.3

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion V2

When presenting your food delicacies with images, text and pricing, do it with style and use this free food menu accordion template. It easily integrates into your website or app, creating a pleasant experience.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css, jquery.js, popper.js

Bootstrap version: 4.5.3

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion V1

If you would like to present your pricing for different services with accordions, this is the free Bootstrap template that will help you out. It features a very clean and minimal design, supporting multiple columns.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css, jquery.js, popper.js

Bootstrap version: 4.5.3

Author

  • Khajan

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion With Open Close Arrows

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, popper.js

Bootstrap version: 4.4.1

Author

  • Milena Friedhoff

Made with

  • HTML / CSS / JS

About a code

Responsive Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.5.2

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Accordion with Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.1.1

Author

  • grafreez

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.0.0

Author

  • bestjquery

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion 78

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.6

Author

  • bestjquery

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion 67

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.6

Author

  • bestjquery

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion Style 87

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.6

Author

  • bestjquery

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion Style 75

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.6

Demo image: Bootstrap 4 Accordion

Author

  • Ondrej

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Accordion

The accordion was crafted with the latest Bootstrap 4. The card component is complemented with smooth and fluid animation. The “plus” and “minus” icons from Font Awesome indicates whether each section is expanded or collapsed.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.3.1

Author

  • Md-Asaduzzaman-Muhid

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion with Sign

Bootstrap accordion with sign and animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.1.3

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Accordion Menu Dropdown

Bootstrap 4 accordion menu dropdown with font awesome icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.3.1

Demo image: Accordion with Chevron Up and Down

Author

  • Ondrej

Made with

  • HTML / CSS / JS

About a code

Accordion with Chevron Up and Down

Using Bootstrap 4 card component, build a vertical accrodion with up & down chevrons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.3.1

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Awesome Accordian Collapse Blue

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.0.0

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Accordion

Bootstrap 4 Accordion with Card and Font Awesome Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.0.0

Demo image: Bootstrap Accordion Start Template

Author

  • Dey Dey

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion Start Template

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.2.0

Author

  • Envato Tuts+

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Accordion Component

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.2.1

Author

  • Nishant Dogra

Made with

  • HTML / CSS / JS

About a code

Collapsible Tabs (Bootstrap Accordion) Easy to Use Plugin

Collapsible tabs (Bootstrap accordion) easy to use as a plugin. Easy to implement need only bootstrap.js & the master jquery file.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap.js, jquery.js

Bootstrap version: 3.3.7

Author

  • Aashima

Made with

  • HTML / CSS / JS

About a code

Accordion/Toggle

Bootstrap accordion with jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 3.3.7

Author

  • Kathryn Jackson

Made with

  • HTML / CSS / JS

About a code

Buffy Bootstrap Accordion Menu

Simple accordion menu using twitter-bootstrap.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.7

Author

  • tutorialrepublic.com

Made with

  • HTML / CSS / JS

About a code

Bootstrap Simple Accordion Widget

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js, popper.js

Bootstrap version: 4.2.1

Author

  • tutorialrepublic.com

Made with

  • HTML / CSS / JS

About a code

Bootstrap Expand and Collapse Faq Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js, popper.js

Bootstrap version: 4.2.1

Author

  • tutorialrepublic.com

Made with

  • HTML / CSS / JS

About a code

Bootstrap Elegant Accordion Widget

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap.js, jquery.js, popper.js

Bootstrap version: 4.2.1

Author

  • tutorialrepublic.com

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion with Highlighted Item

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap.js, jquery.js, popper.js

Bootstrap version: 4.2.1

Author

  • tutorialrepublic.com

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion Menu with Plus Minus Icon

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap.js, jquery.js, popper.js

Bootstrap version: 4.2.1

Author

  • tutorialrepublic.com

Made with

  • HTML / CSS / JS

About a code

Bootstrap Accordion Menu for All Purpose

This is a simple example of accordion menu that can easily be integrated into any Bootstrap template.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js, popper.js

Bootstrap version: 4.2.1

Author

  • Siddharth Panchal

Made with

  • HTML / CSS / JS

About a code

Accordion Styles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.1.1

Author

  • dhisaran

Made with

  • HTML / CSS / JS

About a code

Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.1.1

Author

  • ALIMUL AL RAZY

Made with

  • HTML / CSS / JS

About a code

Animated Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap.js, jquery.js, tweenmax.js

Bootstrap version: 4.1.1

Author

  • Gurdeep Osahan

Made with

  • HTML / CSS / JS

About a code

User Profile with Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 3.3.0

Author

  • aTmpl

Made with

  • HTML / CSS / JS

About a code

Style Bootstrap Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap.js, jquery.js

Bootstrap version: 3.3.0

Author

  • mehedidb

Made with

  • HTML / CSS / JS

About a code

Accordion Frequently Asked Questions

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 3.3.0