Rotate arrow with CSS – knowledgebase JJ

when you click on some action link the icon should rotate in the respective direction. The major occurrence of this application is in accordion design here and there we may use for buttons depending on the requirement.We can achieve this task in two methods, one is based on the toggle classes of the accordion body writing CSS and with the help of jQuery toggling the required classes for the icon.

<!DOCTYPE html>
<html lang="en">
  <head>
   <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./style.css">
    <title>rotate icon for bootstrap accordion</title>
  </head>
  <body>
    <div class="container">
    <div class="accordion" id="accordionExample">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h2 class="mb-0">
            <a
              class="btn btn-link click d-block"
              type="button"
              data-toggle="collapse"
              href="#collapseOne"
              aria-expanded="false"
              aria-controls="collapseOne”>
              Collapsible Group Item #1
                <img class="float-right icon" src="./down-arrow.svg" alt="arrow icon">
            </a>
          </h2>
        </div>
        <div
          id="collapseOne"
          class="collapse show"
          aria-labelledby="headingOne"
          data-parent="#accordionExample">
          <div class="card-body"> card-body-text</div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h2 class="mb-0">
            <a
              class="btn btn-link collapsed click d-block"
              type="button"
              data-toggle="collapse"
              href="#collapseTwo"
              aria-expanded="false"
              aria-controls="collapseTwo">
              Collapsible Group Item #2
              <img class="float-right icon" src="./down-arrow.svg" alt="arrow icon">
            </a>
          </h2>
        </div>
        <div
          id="collapseTwo"
          class="collapse"
          aria-labelledby="headingTwo"
          data-parent="#accordionExample">
          <div class="card-body"> card-body-text</div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingThree">
          <h2 class="mb-0">
            <a
              class="btn btn-link collapsed click d-block"
              type="button"
              data-toggle="collapse"
              href="#collapseThree"
              aria-expanded="false"
              aria-controls="collapseThree"
            >
              Collapsible Group Item #3
              <img class="float-right icon" src="./down-arrow.svg" alt="arrow icon">
            </a>
          </h2>
        </div>
        <div
          id="collapseThree"
          class="collapse"
          aria-labelledby="headingThree"
          data-parent="#accordionExample"
        >
          <div class="card-body"> card-body-text</div>
        </div>
      </div>
    </div>
    <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>
  </body>
</html>

CSS:
h2 a{
text-align: start !important;
}
.click.collapsed .icon {
transform: rotate(180deg);
transition: .3s ease-in-out;
}

SECOND METHOD:

jQuery logic:

jQuery(document).ready(function () {
“use strict”;
//give the class for which element you want to apply the rotate effect on click
jQuery(‘.click’).each(function () {
jQuery(this).click(function () {
jQuery(this).toggleClass(“rotate”);
});
});
});

CSS toggle class

.rotate img {
transform: rotate(-180deg);
transition: .3s;
}

Leave a comment Cancel reply