How to Change Accordion Button Collapsed Icon Color in Bootstrap ?
This article demonstrates how to customize the colors of the accordion button icons in a Bootstrap accordion. By default, Bootstrap accordions use a plus/minus arrow icon to indicate the collapsed or expanded state of accordion items. This tutorial provides step-by-step instructions on how to change the color of the collapsed and expanded icons using Bootstrap.
Prerequisites
Approach
- Add Bootstrap, CSS and JS, Font Awesome for icons, and jQuery for Bootstrap’s JS dependencies.
- Create the accordion structure using Bootstrap’s accordion and accordion-item classes, and ensure each button has the appropriate data-toggle and data-target attributes.
- Write CSS to change the icon color based on the collapsed class, using transitions for smooth color changes.
- Ensure Bootstrap’s JavaScript functionality initialization by including the required script tags at the end of the body.
Example: This example shows the implementation of the above-explained approach.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Bootstrap Accordion with
Custom Icon Colors</title>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
rel="stylesheet">
<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2e2e2e;
padding: 10px 20px;
color: #fff;
}
.navbar img {
max-width: 200px;
display: block;
margin: 0 auto;
}
.accordion-button i {
transition: color 0.3s;
}
.accordion-button.collapsed i {
color: red;
}
.accordion-button:not(.collapsed) i {
color: green;
}
</style>
</head>
<body>
<nav class="navbar">
<img src=
"https://media.w3wiki.net/gfg-gg-logo.svg" alt="Logo">
</nav>
<div class="container mt-5">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed"
type="button" data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne">
HTML <i class="fas fa-chevron-down ml-2"></i>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse"
aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="accordion-body">
HTML stands for HyperText Markup Language.
It is used to design web pages. With the help of
HTML, you can create a complete website structure.
HTML is the combination of Hypertext and Markup language.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed"
type="button" data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
CSS <i class="fas fa-chevron-down ml-2"></i>
</button>
</h2>
<div id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-parent="#accordionExample">
<div class="accordion-body">
CSS (Cascading Style Sheets) is used to style web pages.
Cascading Style Sheets are fondly referred
to as CSS. The reason for using this is to simplify the
process of making web pages presentable.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed"
type="button" data-toggle="collapse"
data-target="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
JavaScript <i class="fas fa-chevron-down ml-2"></i>
</button>
</h2>
<div id="collapseThree"
class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-parent="#accordionExample">
<div class="accordion-body">
JavaScript is a lightweight, cross-platform, single-threaded,
and interpreted compiled programming language.
It is also known as the scripting language for webpages.
It is well-known for the development of web pages,
and many non-browser environments also use it.
</div>
</div>
</div>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
Output:
Contact Us