I'm currently working on creating Bootstrap accordion menus and I'm attempting to remove the border that appears when it's collapsed and expanded. Below is the code I've been working on:
<div class="accordion">
<div class="accordion-item">
<button style="font-weight: bold; background-color: #f5f5f5;"class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Tester
</button>
<div id="collapseOne"class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body" style="background-color: #f5f5f5;">
Placeholder text
</div>
.accordion-button:not(.collapsed) {
color: black !important;
background-color: #f5f5f5 !important;
}
.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active {
background-color: #f5f5f5 !important;
color: black !important;
text-decoration: none !important;
border: hidden !important;
border-color: #f5f5f5 !important;
box-shadow: 0px !important;
}
.accordion-button:focus {
z-index: 3;
border-color: #f5f5f5 !important;
outline: 0;
box-shadow: 0 0 0 .25rem #f5f5f5 !important;
background-color: #f5f5f5;
}
.accordion-body {
border-bottom: none !important;
}
https://i.sstatic.net/tLgMO.png https://i.sstatic.net/w4SnK.png