Adding arrows to the right using Bootstrap Accordion

Question

I wanted to see if it was possible to add arrows to the right of the Bootstrap Accordion headings.

I want the arrows to change from down to up on accordion collapse, is this complicated?

I want just the headings to have the arrows and for them to change on collapse, but I'm having the most trouble trying to figure this out.

Here is the code:

#AccordionHeadings {
  font-weight: bolder;
  color: slategrey;
  font-size: medium;
}
.small:hover {
  background-color: #F8E498!important;
}
.list-group-item h5 {
  margin-left: 10px;
}

#AccordionText {
  margin-bottom: 0px!important;
  color: gray;
  margin-left: 10px;
}

#AccordIcon {
  padding-right: 10px;
  height: 25px;
  width: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">



<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="row">
    <div class="col-12 col-md-10 col-md-8">
      <h4>Choose the right app for the job!</h4>
      <hr style="margin-top: 10px;" />
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
            <img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
            <span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
          <div id="s0" class="sublinks collapse">
            <!-- sublinks collapse -->
            <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">

              <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
              <div class="">
                <h5>OneDrive</h5>
                <p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.
                </p>
              </div>
            </a>
            <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">

              <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" />
              <div>
                <h5>SharePoint</h5>
                <p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p>
              </div>
            </a>
            <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">

              <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" />
              <div>
                <h5>Teams</h5>
                <p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
                </p>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Update

I have now gotten it to somewhat work thanks to the help from the awesome contributors here at Stack Overflow but I've come across a small problem.

Here is my problem that I'm currently experiencing.

On page load: (Why are the arrows not pointing down on pageload?)

On first Accordion click: (Now the icon is correct)

On second Accordion click: (Perfect now)

Code:

.panel-title:after {
    font-family: FontAwesome;
    content: "\f106";
    float: right;
    color: grey;
}
.panel-title.collapsed:after {
    content: "\f107";
}

      <a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
      <img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
      <span id="AccordionHeadings">File Storage and Sharing</span></a>
      <div id="s0" class="sublinks collapse"> <!-- sublinks collapse -->
         <a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
            <div class="col-md-1">
               <img style="height: 32px; width: 45px;" src="/TrainingResourceCenter/O365Training/PublishingImages/Homepage/OneDriveAccordion.png" />
            </div>
            <div class="col-md-11">
               <h5>OneDrive</h5>
               <p id="AccordionText">Store your files in one place, share them 
    with others, and get them from any device connected to the 
    Internet.</p>
            </div>
         </a>

Possible duplicate of [Add up/down arrows to Bootstrap Accordion](https://stackoverflow.com/questions/46777704/add-up-down-arrows-to-bootstrap-accordion) — Robert, Jun 25 '18 at 14:22
@Robert, I've tried that method but it didn't help me too much, I'll be updating the post now. — , Jun 25 '18 at 14:53
@Robert, I have updated the page to reflect my current problem. — , Jun 25 '18 at 15:02
Please make updates at the end of the question. This will help future readers who did not see the original, and for whom an update at the start will be a confusing experience. — halfer, Jul 17 '18 at 20:00

billy.farroll · Answer 1 · 2018-06-25T14:08:26.437

Try this:

.panel-title {
  position: relative;
}

.panel-title::after {
    content: "\f107";
    color: #333;
    top: -2px;
    right: 0px;
    position: absolute;
    font-family: "FontAwesome"
}

.panel-title[aria-expanded="true"]::after {
    content: "\f106";
}

This is what it looks like in the snippet: PLEASE NOTE this is using font-awesome (for the arrow), so you will need the <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> in your <head> tags

#AccordionHeadings {
  font-weight: bolder;
  color: slategrey;
  font-size: medium;
}
.small:hover {
  background-color: #F8E498!important;
}
.list-group-item h5 {
  margin-left: 10px;
}

#AccordionText {
  margin-bottom: 0px!important;
  color: gray;
  margin-left: 10px;
}

#AccordIcon {
  padding-right: 10px;
  height: 25px;
  width: 25px;
}

.panel-title {
  position: relative;
}

.panel-title::after {
content: "\f107";
color: #333;
top: -2px;
right: 10px;
position: absolute;
font-family: "FontAwesome"
}

.panel-title[aria-expanded="true"]::after {
content: "\f106";
}

   <html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

   
</head>

<body>
  <div class="row">
    <div class="col-12 col-md-10 col-md-8">
      <h4>Choose the right app for the job!</h4>
      <hr style="margin-top: 10px;" />
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
            <img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
            <span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
          <div id="s0" class="sublinks collapse">
            <!-- sublinks collapse -->
            <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">

              <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
              <div class="">
                <h5>OneDrive</h5>
                <p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.
                </p>
              </div>
            </a>
            <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">

              <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" />
              <div>
                <h5>SharePoint</h5>
                <p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p>
              </div>
            </a>
            <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">

              <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" />
              <div>
                <h5>Teams</h5>
                <p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
                </p>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Thanks for the input @billy! Looks like the arrow still won't change on collapse, I'm using Bootstrap 3 so is the aria attribute not working for bootstrap 3? — , Jun 25 '18 at 13:47
Oh right. I'll get back to you with a solution for Bootstrap 3 — billy.farroll, Jun 25 '18 at 13:50
Thanks for the input billy! I still haven't gotten it working 100%, for some reason, it is still interfering. — , Jun 25 '18 at 14:53

score 1 · Accepted Answer · answered Jun 25 '18 at 15:19

Added the attribute "collapsed" to all the individual Accordion panel-title class and it works perfectly.

<a href="#" class="list-group-item panel-title collapsed" data-toggle="collapse" data-target="#s6" data-parent="#accordion" style="background-color: #e5edf4;">

score 0 · Answer 3 · answered Jun 25 '18 at 15:26

Like the Bootstrap 3 solution I linked to as a possible duplicate; this can be solved entirely through the use of [aria-expanded=true] as a CSS selector. The only difference in Bootstrap 4 is the actual HTML structure of the accordion, the CSS for applying the arrows remains the same:

.panel-title:after {
  font-family: FontAwesome;
  content: "\f107";
  float: right;
  color: grey;
}

.panel-title[aria-expanded="true"]:after {
  content: "\f106";
}

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
  <span id="AccordionHeadings">File Storage and Sharing</span>
</a>

<div id="s0" class="sublinks collapse">
  <a class="list-group-item small" href="#null">
    <div class="col-md-1">
      [ image ]
    </div>

   <div class="col-md-11">
      <h5>OneDrive</h5>
      <p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.</p>
    </div>
  </a>
</div>

Note: If you want to use Font Awesome 5.x you may need to adjust the CSS to reference the exact font / font weight as the latest version breaks down its icons across multiple factors.

Adding arrows to the right using Bootstrap Accordion

Update

3 Answers3

Linked