title: Adding arrows to the right using Bootstrap Accordion
body: <p>I wanted to see if it was possible to add arrows to the right of the Bootstrap Accordion headings.</p>
  
  <p>I want the arrows to change from down to up on accordion collapse, is this complicated?</p>
  
  <p>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.</p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;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"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"&gt;
  
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-12 col-md-10 col-md-8"&gt;
        &lt;h4&gt;Choose the right app for the job!&lt;/h4&gt;
        &lt;hr style="margin-top: 10px;" /&gt;
        &lt;div class="panel-group" id="accordion"&gt;
          &lt;div class="panel panel-default"&gt;
            &lt;a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;"&gt;
              &lt;img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" /&gt;
              &lt;span id="AccordionHeadings"&gt;File Storage and Sharing&lt;/span&gt;&lt;span class="glyphicon glyphicon-menu-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;div id="s0" class="sublinks collapse"&gt;
              &lt;!-- sublinks collapse --&gt;
              &lt;a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx"&gt;
  
                &lt;img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" /&gt;
                &lt;div class=""&gt;
                  &lt;h5&gt;OneDrive&lt;/h5&gt;
                  &lt;p id="AccordionText"&gt;Store your files in one place, share them with others, and get them from any device connected to the Internet.
                  &lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx"&gt;
  
                &lt;img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" /&gt;
                &lt;div&gt;
                  &lt;h5&gt;SharePoint&lt;/h5&gt;
                  &lt;p id="AccordionText"&gt;Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
              &lt;a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx"&gt;
  
                &lt;img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" /&gt;
                &lt;div&gt;
                  &lt;h5&gt;Teams&lt;/h5&gt;
                  &lt;p id="AccordionText"&gt;Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
                  &lt;/p&gt;
                &lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <h2>Update</h2>
  
  <p>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.</p>
  
  <p>Here is my problem that I'm currently experiencing.  </p>
  
  <p>On page load: (<strong><em>Why are the arrows not pointing down on pageload?</em></strong>)</p>
  
  <p><a href="https://i.stack.imgur.com/VTpGM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VTpGM.png" alt="enter image description here"></a></p>
  
  <p>On first Accordion click: (<strong><em>Now the icon is correct</em></strong>)</p>
  
  <p><a href="https://i.stack.imgur.com/7xgLk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7xgLk.png" alt="enter image description here"></a></p>
  
  <p>On second Accordion click: (<strong><em>Perfect now</em></strong>)</p>
  
  <p><a href="https://i.stack.imgur.com/m4xe9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m4xe9.png" alt="enter image description here"></a></p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel-title:after {
      font-family: FontAwesome;
      content: "\f106";
      float: right;
      color: grey;
  }
  .panel-title.collapsed:after {
      content: "\f107";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>      &lt;a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;"&gt;
        &lt;img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" /&gt;
        &lt;span id="AccordionHeadings"&gt;File Storage and Sharing&lt;/span&gt;&lt;/a&gt;
        &lt;div id="s0" class="sublinks collapse"&gt; &lt;!-- sublinks collapse --&gt;
           &lt;a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx"&gt;
              &lt;div class="col-md-1"&gt;
                 &lt;img style="height: 32px; width: 45px;" src="/TrainingResourceCenter/O365Training/PublishingImages/Homepage/OneDriveAccordion.png" /&gt;
              &lt;/div&gt;
              &lt;div class="col-md-11"&gt;
                 &lt;h5&gt;OneDrive&lt;/h5&gt;
                 &lt;p id="AccordionText"&gt;Store your files in one place, share them 
      with others, and get them from any device connected to the 
      Internet.&lt;/p&gt;
              &lt;/div&gt;
           &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>