Topic: Remove bottom borderline of flush accordion after element opening
https://mdbootstrap.com/snippets/standard/pawled/3306719
When I click an accordion button, the bottom borderline disappears for a short moment and then appears again.
I want to remove this line after opening of collapsible div. Any solution?
Add .border-top class to accordion parent
<div class="accordion accordion-flush border-top" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
<b>Accordion #2 Item #1</b>
https://mdbootstrap.com/snippets/standard/m-duszak/3311954
pawled free commented 3 years ago
How to do it with CSS? I want to set a breakpoint.
Michał Duszak staff commented 3 years ago
Think of a class that would point out to the accordion items that you want your border to apply to. And simply set the border. https://mdbootstrap.com/snippets/standard/m-duszak/3342304#css-tab-view
pawled free commented 3 years ago
how to make them behave like one accordion? I mean collapsing of every single point after opening of any.
Use this CSS:
.accordion-button:not(.collapsed), .accordion-button:not(.collapsed):focus {
box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px;
}
pawled free commented 3 years ago
Thanks. Can you tell me how to add dividing line above the first element too ("Accordion #2 Item #1" inside my snippet)? I need it for a grid purposes.
https://mdbootstrap.com/snippets/standard/pawled/3309793
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: Yes