Bootstrap

Bootstrap 4 Accordion Menu with arrow and icon example

Customize Bootstrap 4 Accordion Component as a collapsible menu

Views: 1727 Published: 2019 Aug 05 by Zakir Hossain

Bootstrap Components Bootstrap Collapse known as Bootstrap Accordion. is the tutorial will show you how to create a beautiful collapsible menu with Bootstrap collapse. this is a simple tutorial for beginner. How to Customize Bootstrap 4's Accordion Component

Bootstrap 4 Accordion Menu with arrow and icon example

Bootstrap 4 Accordion Menu Example

Bootstrap 4 Accordion Menu Example example preview

inbox
Draft
Sent
Address Book

inbox
Draft
Sent
Address Book

inbox
Draft
Sent
Address Book

inbox
Draft
Sent
Address Book

CSS Code

Bootstrap 4 Accordion Menu Example required css code

 

<style>
.accordion-menu > a {
  display: block;
  position: relative;
}
.accordion-menu > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.accordion-menu > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}
</style>