How to Change Accordion Button Collapsed Icon Color in Bootstrap ?

How to Change Accordion Button Collapsed Icon Color in Bootstrap ?

Last Updated : 12 Jun, 2024

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.

HTML

<!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.geeksforgeeks.org/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:

How to Change Accordion Button Collapsed Icon Color in Bootstrap ?

A

ashishrettgg

Improve

Article Tags :

Similar Reads

How to Change Close Button Color in Bootstrap 5?

Changing the color of the close button in Bootstrap 5 involves customizing the styles using CSS. The close button in Bootstrap 5 has a specific class .btn-close, and you can override its styles to achieve the desired color. In this article, we will see how we can do it.Preview PrerequisitesHTMLCSS B

How to Change Button Color in Bootstrap 5 ?

Bootstrap 5 provides developers with a lot of capabilities that enable them to create responsive and aesthetically pleasing online apps. Developers frequently require customizations, such as altering button colors to better reflect their branding or design philosophies. This post will walk you throu

How to change (-, +) symbol with a button in Bootstrap Accordion ?

In Bootstrap 4, there is no default option for changing (-, +) symbol with a button accordion. Hence it can be done by using jQuery. The Following Approach will explain clearly.Approach:Â Â Font awesome or any icon utilities to display (-, +) symbol:Â Â <link rel="stylesheet" href="https://use.font

How to Remove Outline from Accordion Buttons in Bootstrap?

Bootstrap 5 provides a convenient way to create collapsible accordion elements. However, by default, accordion buttons receive an outline when focused for accessibility reasons. In some cases, you might want to remove this outline for aesthetic purposes, while ensuring that your website remains acce

How to Change Bootstrap Accordion Background Color ?

To change the Bootstrap Accordion background color, target the .accordion-body class and apply a background-color property via custom CSS. Alternatively, use Bootstrap utility classes like .bg-primary, .bg-secondary, etc., for predefined background colors. Syntax: <div class="accordion" id="myAcc