Topic: Remove bottom borderline of flush accordion after element opening

pawled free asked 2 years ago

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?

Michał Duszak staff answered 2 years ago

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">
        class="accordion-button collapsed"
        <b>Accordion #2 Item #1</b>

pawled free commented 2 years ago

How to do it with CSS? I want to set a breakpoint.

Michał Duszak staff commented 2 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.

pawled free commented 2 years ago

how to make them behave like one accordion? I mean collapsing of every single point after opening of any.

Michał Duszak staff answered 2 years ago

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 2 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.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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