Remove bottom borderline of flush accordion after element opening


Topic: Remove bottom borderline of flush accordion after element opening

pawled priority asked 11 months ago

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?


Michał Duszak staff answered 10 months 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">
      <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 priority commented 10 months ago

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


Michał Duszak staff commented 10 months 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 priority commented 10 months ago

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


Michał Duszak staff answered 11 months ago

Use this CSS:

.accordion-button:not(.collapsed), .accordion-button:not(.collapsed):focus  {
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px;
}

pawled priority commented 10 months 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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: Yes