Step by Step Guide to Create Accordion with Arrow Using Bootstrap

Bootstrap Accordion with Arrow

Accordion menus have proven to be a popular choice for organizing and displaying content in a compact and visually appealing manner. So, in this article, we will see how to create an accordion with an arrow in Bootstrap.

What is an accordion?

The accordion allows users to vertically collapse and expand content sections with a simple click. We can create the accordion using the Bootstrap framework. It is used to present large amounts of information while conserving screen real estate. We can create arrow indicators for the accordion headers can enhance the user experience by providing clear visual cues for expansion and collapse actions.

Why should we create an accordion with an arrow?

  • It provides clear visual cues to users, indicating the expand and collapse functionality of each accordion section.
  • Accordion menus without arrow indicators may require users to click on the accordion headers to determine whether a section is expanded or collapsed. So, we can add arrow icons, users can quickly identify the state of each section at a glance.
  • Users are more likely to understand that clicking on the accordion header will toggle the corresponding content section.
  • Screen reader users, for instance, can benefit from alternative text associated with the arrow icons, conveying the expand/collapse functionality.

Google also uses this bootstrap accordion with an arrow feature in People also ask.

bootstrap accordion with arrow

Look at the above image, if we click on the down arrow, the entire information will be displayed in detail

How to create Bootstrap Accordion with Arrow?

Follow these simple steps to create an accordion with an arrow

READ ALSO  Easy Way to Create Attractive Search Box in Bootstrap

1. Link Bootstrap to an HTML file:

We can use the features of Bootstrap only if we link Bootstrap to our project. To link Bootstrap you need to paste the code below between your HTML <head> and </head> tags.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

2. Create HTML Structure

  1.  First, create a parent <div> with classname “panel-group” and Idname “accordion“. You can create multiple child div’s on this parent div and you should create all accordions with arrows inside this parent div.
  2. Create child <div> inside the parent and set classname “panel panel-default“.
  3. Then create two div’s inside the child div, one for “accordion heading” and another for “accordion body”.
  4.  Set the accordion heading div’s classname to “panel-heading accordion-toggle collapsed“, ‘data-toggle’ attribute to “collapse”, “data-parent” attribute to “#accordion” and “data-target” attribute to “#collapseOne”. You can create an accordion heading using heading tags like h1,h2,h3, and h4 inside this div and set the class name as “panel-title” for the heading tag.
  5. Set the accordion body div’s class name to “panel-collapse collapse”, and “id” to “collapseOne“. You can create an accordion body using paragraph tag <p> inside this div.

Example:

<!--Parent Div -->
<div class="panel-group" id="accordion">
   <!--Child Div -->
   <div class="panel panel-default">

      <!--Sub Child Div 1-->
      <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
         <h4 class="panel-title">  Your Heading Here  </h4>
      </div>

      <!--Sub Child Div 2 -->
      <div id="collapseOne" class="panel-collapse collapse">
         <p>Your body Here </p>           
      </div>

   </div>
</div>

3. Set CSS styles

After following the above steps correctly, paste the below CSS code in your HTML in the <style> tag. This CSS style code is used to display the up arrow to users when the accordion is collapsed and the down arrow to users when the accordion is uncollapsed.

READ ALSO  How to Create Text Over Image using Bootstrap

CSS:

.panel-heading {
   position: relative;
   }

.panel-heading[data-toggle="collapse"]:after {
  font-family: 'Glyphicons Halflings';
  content: "\e072"; /* "play" icon */
  position: absolute;
  color: #b0c5d8;
  font-size: 18px;
  line-height: 22px;
  right: 20px;
  top: calc(50% - 10px);

  /* rotate "play" icon from > (right arrow) to down arrow */
  -webkit-transform: rotate(-90deg);
  -moz-transform:    rotate(-90deg);
  -ms-transform:     rotate(-90deg);
  -o-transform:      rotate(-90deg);
  transform:         rotate(-90deg);
}
.panel-heading[data-toggle="collapse"].collapsed:after {
/* rotate "play" icon from > (right arrow) to ^ (up arrow) */
  -webkit-transform: rotate(90deg);
  -moz-transform:    rotate(90deg);
  -ms-transform:     rotate(90deg);
  -o-transform:      rotate(90deg);
  transform:         rotate(90deg);
}

Preview

See the Pen
bootstrap accordion with arrow by Wonderdevelop (@wonderdevelop)
on CodePen.

Conclusion

So, you can add one of the bootstrap feature accordions with an arrow by following these above steps easily.

Leave a Reply