CSS for bootstrap accordion

Question

So I'm pretty new to css and bootstrap, and have added an accordian into my view page. I have tried to alter the original css but with no luck!

<div class="accordion accordian-flush" id="accordionExample">
@foreach (var s in Model.Data)
{
        <div class="accordion-item">

            <h2 class="accordion-header">

                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse@(s.Id)"
                    aria-expanded="false" aria-controls="collapse@(s.Id)">
                    @s.Name
                </button>
            </h2>
            <div id="collapse@(s.Id)" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                   <p><strong>Email: </strong>@s.Email</p>
                <p><strong>Manager: </strong>A name</p>

                <p><a [email protected]("admin") class="btn-add p-0 m-0" asp-action="Details"
                asp-route-id="@s.Id"
                aria-label="see shop details">Details</a></p> 
                </div>
            </div>
                
        </div>

}
</div>

This is my view page and I will show you what I have tried adding in my style sheet...

.accordion{
  --bs-accordion-btn-bg:#1D976C;
  --bs-accordion-active-bg: red;
}

Finally these are the links in my _layout

 <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/EmployeeEntry.Web.styles.css" asp-append-version="true" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

I have tired watching youtube tutorials but they show similar things and I'm just not sure what to do next! Any help would be appreciated

Answer 1

The issue might related the bootstrap CSS version.

Try to open the /lib/bootstrap/dist/css/bootstrap.min.css file and check the Bootstrap version, you might using Bootstrap v5.1.0 version, like this:

When use the above version, the --bs-accordion-active-bg will not working.

To solve this issue,

Solution 1:

you can try to use the [email protected] version, instead of v5.1.0 version.

You can modify your code as below: replace the bootstrap.min.css file to the latest bootstrap CDN reference.

@*     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> *@
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

and add the collapsed class for the accordion button.

<div class="accordion accordian-flush" id="accordionExample">
    @foreach (var s in Model.Data)
    {
        <div class="accordion-item"> 
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse@(s.Id)"
                        aria-expanded="false" aria-controls="collapse@(s.Id)">
                    @s.Name
                </button>
            </h2> 
            <div id="collapse@(s.Id)" class="accordion-collapse collapse " data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <p><strong>Email: </strong>@s.Email</p>
                    <p><strong>Manager: </strong>A name</p>

                    <p>
                        <a [email protected]("admin") class="btn-add p-0 m-0" asp-action="Details"
                           asp-route-id="@s.Id"
                           aria-label="see shop details">Details</a>
                    </p>
                </div>
            </div> 
        </div> 
    }
</div> 

Then the result as below:

Update:

Solution 2

If you still want to use the Bootstrap v5.1.0 version (using <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />), you can add the following CSS style:

<style> 
    .accordion-button {
        background-color: #1D976C;
    }
    .accordion-button:not(.collapsed){
        background-color:red;
    } 
</style>

Then add the collapsed class for the accordion button.

You can also get the same result: