Style Ng-Bootstrap Accordion with CSS

How to style ng-bootstrap accordion?

Following Solution is for ng-bootstrap version 5.x.x & 6.x.x & Angular 8 & 9

Fade style won't apply if the content of accordion gets removed from the DOM, So, You need to add [destroyOnHide]='false' along with ngb-accordion selector. Now, Content won't get removed from DOM when content gets hidden.

accordion.component.html:

<div class="card">
   <div class="card-body">

      <!-- ngb Accordion starts -->

      <ngb-accordion [destroyOnHide]='false' [closeOthers]="true" activeIds="panel1">

         <ngb-panel id="panel1">
            <ng-template ngbPanelTitle>
               <span>Accordion Item 1 </span>
            </ng-template>
            <ng-template ngbPanelContent>
               Donut caramels sweet roll bonbo
            </ng-template>
         </ngb-panel>

         <ngb-panel id="panel2">
            <ng-template ngbPanelTitle>
               <span>Accordion Item 2 </span>
            </ng-template>
            <ng-template ngbPanelContent>
               tootsie roll sweet gummi bears chocolate bar.
            </ng-template>
         </ngb-panel>

         <ngb-panel id="panel3">
            <ng-template ngbPanelTitle>
               <span>Accordion Item 3 </span>
            </ng-template>
            <ng-template ngbPanelContent>
               tootsie roll sweet gummi bears chocolate bar.
            </ng-template>
         </ngb-panel>

         <ngb-panel id="panel4" [disabled]="true">
            <ng-template ngbPanelTitle>
               <span>Accordion Item 4 </span>
            </ng-template>
            <ng-template ngbPanelContent>
               gummi bears jujubes cotton candy cake marshmallow. Tart cake danish dessert
            </ng-template>
         </ngb-panel>

      </ngb-accordion>

      <!-- ngb Accordion ends -->

   </div>
</div>

accordion.component.scss :

// collapse toggle
::ng-deep .collapse {
  transition: max-height .55s, opacity .35s ease-in-out;
  max-height: 0;
  opacity: 0;
  display: block !important;

  &.show {
    max-height: 100rem;
    opacity: 1;
  }
}

::ng-deep .accordion {
  .card {
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .04) !important;

    .card-header {
      // padding-top: 0;
      padding: 0;

      button {
        padding: 1.2rem;
        width: 100%;

        span {
          float: left;
          font-size: 1.2rem;
        }
      }
    }

    .card-body {
      padding: 1rem;
    }
  }
}

You can see live demo from here.

Style ng-bootstrap accordion with css

As @ChristopherMoore said in his comment, it was a problem due to Shadow DOM. Adding /deep/ fixed it. Here the updated functional code.

  /deep/ .card {
  border: none;
}

/deep/ .card-header {
  margin-top: 0.75em !important;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

/deep/ .card-block {
  text-align: left

Style of accordion-groups' headers (ngx-bootstrap)?

accordion-group {
  ::ng-deep {
    div {
      &>div.panel-heading.card-header.panel-enabled {
        background-color: rgba(52, 58, 64, 0.15); // change the background of every accordion heading

        .btn-link {
          color: rgb(6, 10, 9); // change the accordion heading buttons style
        }
      }

      &>div.panel-collapse.collapse.in.show>div {
        background-color: hsla(210, 10%, 83%, 0.10); // change the expanded content style
      }
    }
  }

}

::ng-deep{} - that's how you can change the styles of the component that comes from imported library.

The solution I gave is made with SASS (.scss file). I don't know if you can apply changes to the /deep/ components' styles in a regular CSS. If your Angular project is configurated with CSS you can change it to use SASS syntax with the following line:

ng config schematics.@schematics/angular:component.style scss

customizing ngbAccordion

In the github issue link, which I have mentioned above, in the same thread I found this solution and it worked. Used the following css:

::ng-deep .card {
  margin-bottom: 20px;
}

::ng-deep .card .card-header.active > a > span {
  color: #1d2124;
}

Have updated the stackblitz code also

---

Related Topics