How do I fix the Bootstrap Accordion Arrow direction?-CodePudding

I am using Bootstrap 5.1 with the

Here is the css for the accordion:

.accordion-button::after {
            background-image: url("data:image/svg xml,");
        }
.accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg xml,");
        }

Any help in getting the chevron turn around would be appreciated.

CodePudding user response：

First make sure that you use unique id's for both .accordion-button and .accordion-collapse.

If it is collapsed by default, add the .collapsed on the .accordion-button and set aria-expended to true.

.accordion-button::after {
  background-image: url("data:image/svg xml,");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg xml,");
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>

<div class="accordion" id="accordion">
  <div class="accordion-item">
    <h4 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         Current Courses
     </button>
    </h4>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordion">
      <div class="accordion-body">
        {current_courses}
        <p class="course"><a class="course-link" href="{current_courses:link_to_course}">{current_courses:title}</a> {current_courses:hours} CPE Hours {current_courses:course_date}</p>
        {/current_courses}
      </div>
      <!-- /. accordion-body -->
    </div>
    <!-- /.collapse -->
  </div>
  <!-- /.accordion-item -->