Bootstrap Accordion Issue With Arrow

.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";
}

/*
 * Added 12-27-20 to showcase full title clickthrough
 */

.panel-heading-full.panel-heading {
  padding: 0;
}

.panel-heading-full .panel-title {
  padding: 10px 15px;
}

.panel-heading-full .panel-title::after {
  top: 10px;
  right: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-group" id="accordion">

  <!-- First Panel -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne">Collapsible Group Item #1</h4>
    </div>
    
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
    
  <!-- Second Panel -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo">Collapsible Group Item #2</h4>
    </div>
    
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
    
  <!-- Third Panel -->
  <div class="panel panel-default">
    <div class="panel-heading panel-heading-full">
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseThree">Collapsible Group Item #3 (panel-heading-ful)</h4>
    </div>

    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  
</div>

css accordion right arrow and down arrow not working properly

Add class collapsed on your <a> tags. They render first as open because of the missing class

https://jsfiddle.net/jpgc24rg/

<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

Bootstrap accordion icons not working on collapsed states

Change your css to:

.panel-heading-one .accordion-toggle:after{
    font-family: 'Glyphicons Halflings';
    content: "\e114"; 
    float: right;        
    color: #ffffff;         
    height: 24px;
    width: 40px;
    background-color: #000000;
}

.panel-heading-one .accordion-toggle[aria-expanded="true"]:after {
        /* symbol for "opening" panels */
        content: "\e113";
    }

.panel-heading-one .accordion-toggle[aria-expanded="false"]:after {
    /* symbol for "collapsed" panels */
    content: "\e114";
}

And it will work perfectly.

Extra: In your accordion you have used same href='#collapseThree'
for last and second last item. When you will click on last element, it
will open second last item. So change your href in last element.

Changing the color arrow in Bootstrap

Bootstrap uses background images in their accordion arrows. You could edit the fill property of the linked svg.

I checked up on the svg used on https://getbootstrap.com/docs/5.0/components/accordion/, and changed the color to white with css

.accordion-button:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

Note here that I wrote fill="%23ffffff", this changes the color to #ffffff (%23 is parsed to #)

You can find my codepen here

I would like to add that I don't think this is the most elegant way of solving this. You might want to change the content of the :after element of the .accordion-button.

Take a look at Adding arrows to the right using Bootstrap Accordion

---

Related Topics