I’m servicing an accordion in Bootstrap as well as whenever I click it to broaden, this white line shows up beneath the heading.
This is what I have today:
HTML – All divs do close appropriately, there’s simply much more on this web page
<< div id=" accordionMain" course=" row d-flex justify-content-center">>.
<< div course=" accordion accordion-flush d-grid gap-4 pt-5 w-50" id=" FlushAccordion">
<> < div id=" accordionItems" course=" accordion-item">
<> < h2 course=" accordion-header" id=" accordionHeading">
<> < switch id=" accordionButton" course=" accordion-button fell down" kind=" switch" data-bs-toggle=" collapse"
data-bs-target=" #flush- collapseOne" aria-expanded=" incorrect" aria-controls=" flush-collapseOne">
> Inquiry 1.
<.
<.
<< div id=" flush-collapseOne" course=" accordion-collapse collapse" aria-labelledby=" accordionHeading"
data-bs-parent=" #FlushAccordion">
<> < div id=" accordionBody" course=" accordion-body">> Lorem ipsum, dolor rest amet consectetur adipisicing elit. Dolores est quasi ex lover! Ex lover deleniti consequuntur quisquam earum cupiditate quos ratione eum saepe, orgasm animi rerum optio repudiandae amet a explicabo?<.
<.
<.
CSS:
#accordionMain {
padding-top: 50px! crucial;
padding-bottom: 200px! crucial;.
}
#accordionHeading {
background-color: # 343A40! crucial;.
font-size: 64px;.
cushioning: 10px;.
border-radius: 15px;.
}
#accordionButton {
shade: #FAFAFE! crucial;.
background-color: # 343A40! crucial;.
font-size: 48px;.
font-weight: bolder;.
}
#accordionBody {
shade: #FAFAFE! crucial;.
background-color: # 343A40! crucial;.
border-bottom-left-radius: 5px;.
border-bottom-right-radius: 5px;.
}
/ * Buttons for frequently asked question acordion */
. accordion-button:: after {
background-image: link(" information: image/svg+ xml,<< svg xmlns=" http://www.w3.org/2000/svg" size=" 16" elevation=" 16" fill=" white" course=" bi bi-plus-circle" viewBox=' 0 0 16 16'><> < course d='M 8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><> < course d='M 8 4a.5.5 0 0 1.5.5 v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/><> ");.
}
. accordion-button: not(. broken down):: after {
background-image: link(" information: image/svg+ xml,<< svg xmlns=" http://www.w3.org/2000/svg" size=" 16" elevation=" 16" fill=" white" course=" bi bi-dash-circle" viewBox=' 0 0 16 16'><> < course d='M 8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><> < course d='M 4 8a.5.5 0 0 1.5 -.5 h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/><> ");.
}
I have actually attempted making modifications to the cushioning as well as margins for all the various areas however this hasn't assisted me in all.
