Adding Arrows to the Right Using Bootstrap Accordion

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

<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.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><!-- Accordion START -->      <div class="panel-group" id="accordion">        <div class="panel panel-default">          <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">            <h4 class="panel-title">Test1</h4>
          </div>          <div id="collapseOne" class="panel-collapse collapse">            <div class="panel-body">              <p>sadfsadfsdaf sadf</p>            </div>          </div>        </div>        <div class="panel panel-default">          <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">            <h4 class="panel-title">Test2</h4>
          </div>          <div id="collapseTwo" class="panel-collapse collapse">            <div class="panel-body"><p>Bla bla bla</p>            </div>          </div>        </div>      </div>      <!-- Accordion END -->

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

How to put the down arrow of an accordion-button in the left

Add margin-right:auto to the ::after element which relates to the arrow; along with removing the margin-left that is applied by Bootstrap. See below.

.accordion-button::after {
  margin-left:0!important;
  margin-right:auto;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Code -->
<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button dir="rtl" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        السؤال الأول؟
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">الجواب على سؤالك الأول</div>
    </div>
  </div>
</div>