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>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
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.
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:
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.
21 likes
Add to read list
Comments