Collection of free Bootstrap accordion code examples.

Related Articles

  1. CSS Accordion Menus
  2. jQuery Accordions
  3. React Accordions
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 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

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

  • 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