All possible methods to rotate arrow icon on click in accordion(bootstrap)

Byadmin

In the journey of web devs, one of the most frequently used applications is 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.

Method:1 Rotate the arrow with CSS

First, we will go with the HTML with bootstrap version 4 classes and then add CSS for the required functionality. We can apply the same logic for bootstrap version-3 also.

HTML for the project

Index.html

<!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>
Read moreNSX-T Tier-1 Service Router (SR) Placement

Here I’m using minified files of cdn to render the bootstrap and required jQuery libraries at the bottom of the code. I have taken the arrow format as SVG icon and you can take your own preferred icon from the available sites.

After completing the HTML, then write the CSS in the style.css file. The logic that I have taken here is whenever the collapsed class is active for the accordion title then the arrow should rotate to 180deg, and the direction of the arrow depends on the requirement.

CSS logic

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

Final Results

The result of the above method is

Result GIF of rotating icon in the accordion using CSS

Method:2 Toggling the property with jQuery

HTML for the project

The HTML structure is same as given in method 1, but the only change is you need to include the jQuery cdn and script.js in the head tag as shown below.

Read moreVCF, NSX, SD-WAN, AWS

Index.html

<!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>

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

Look below code to get the class of rotate

CSS toggle class

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

Final Results:

Result GIF of rotating icon in the accordion using jQuery

Finally, I want to conclude that, we can do this functionality in either way. I suggest to go with CSS because it is simple and straightforward and saves the developer time and as well as we can reduce the file size that can improve site performance.

Similar Posts