CODEWITHSUNDEEP
htmlcssbootstrap-5
Freddy Meijer
Freddy Meijer

Reputation: 99

change accordion show color

Goodmorning all,

I have a Bootstrap question. I have the following HTML page

<!DOCTYPE html>
<html lang="nl-NL">


<body>
    <div class="container-md">
        <br>
        <div class="accordion" id="accordionAikido">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Lorem Ipsum Header
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                    data-bs-parent="#accordionAikido">
                    <div class="accordion-body">
                        <p>Lorem Ipsum</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="container-md">
        <p id="copyright">© Freddy Meijer</p>
    </footer>
</body>

</html>

I changed the colors of the accordion slightly in a CSS file:

h4,
p,
#copyright {
    color: #fbfcfd;
    padding-left: 10px;
}

.accordion-body{
    background-color: #7aa8bd;
}

.accordion-button{
    background-color: #fbfbef;
}

But now I have a problem. As you can see when collapsed the color is off-yellow but when I open the accordion the color is blue-ish:

collapsed version

showing version

I tried serveral things but I cannot change the blue-ish to another shade of yellow. What do I miss?

I tried to change the color of every ID and Class in the CSS but nothing helped. I tried the

.accordion-button.collapsed::after

suggestion of this post but that didn't work. The button is still blue.

Upvotes: 2

Views: 1291

Answers (2)

Tushar Makawana
Tushar Makawana

Reputation: 46

Please use this class "bg-warning text-dark bg-opacity-10" with accordion button.

refer this link for understanding.

Upvotes: 0

Jeremy
Jeremy

Reputation: 179

If you add the following CSS it will stay yellow when you open the accordion.

.accordion-button:not(.collapsed) {
    background-color: #fbfbef;
}

Upvotes: 3

Related Questions