NgShowcase

Ng - Accordion

Styled byLS Accordion

Basic usage

Collapsing

Super simple Accordion

A simple and customizable accordion component.

Super simple Accordion

A simple and customizable accordion component.

Super simple Accordion

A simple and customizable accordion component.

Super simple Accordion

A simple and customizable accordion component.

Super simple Accordion

A simple and customizable accordion component.

Super simple Accordion

A simple and customizable accordion component.

<Accordion class="Accordion-pure" [Collapsing]="collapsing">
 <AccordionItem Title="Super simple Accordion">
 <ng-template AccordionContent>
 A simple and customizable accordion component.
 A simple and customizable accordion component.
 A simple and customizable accordion component.
 </ng-template>
 </AccordionItem>
 <AccordionItem Title="Super simple Accordion" [Disabled]="true">
 <ng-template AccordionContent>
 A simple and customizable accordion component.
 A simple and customizable accordion component.
 A simple and customizable accordion component.
 A simple and customizable accordion component.
 </ng-template>
 </AccordionItem>
 <AccordionItem Title="Super simple Accordion">
 <ng-template AccordionContent>
 A simple and customizable accordion component.
 A simple and customizable accordion component.
 A simple and customizable accordion component.
 A simple and customizable accordion component.
 A simple and customizable accordion component.
 </ng-template>
 </AccordionItem>
 </Accordion>

      <Accordion class="Accordion-pure" [Collapsing]="collapsing">
        <AccordionItem Title="Super simple Accordion">
          <ng-template AccordionContent>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
          </ng-template>
        </AccordionItem>
        <AccordionItem Title="Super simple Accordion" [Disabled]="true">
          <ng-template AccordionContent>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
          </ng-template>
        </AccordionItem>
        <AccordionItem Title="Super simple Accordion">
          <ng-template AccordionContent>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
          </ng-template>
        </AccordionItem>
      </Accordion>

.Accordion-pure{
  .Card {
    box-shadow: none;

    .Card-header {
      background-color: transparent !important;
    }
  }
}

  collapsing = true;

With Custom title

Custom Title

A simple and customizable accordion component.

      <Accordion [Collapsing]="true">
        <AccordionItem>
          <ng-template AccordionTitle>
            <div class="Flex Space-x-2">
              <span>Custom Title</span>
            </div>
          </ng-template>
          <ng-template AccordionContent>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
            <p>A simple and customizable accordion component.</p>
          </ng-template>
        </AccordionItem>
      </Accordion>

With Custom Header

Custom Header (with custom toggle button)

This is a complete custom header implementation.

      <Accordion [Collapsing]="collapsing">
        <AccordionItem Title="Super simple Accordion">
          <ng-template AccordionHeader let-toggle="toggle">
            <div class="D-flex Align-items-center Justify-content-between PX-2 Cursor-pointer" (click)="toggle()">
              <h6>
                Custom Header <span>(with custom toggle button)</span>
              </h6>
              <div class="P-2 Accordion-toggle">
                <i class="fa-solid fa-caret-down"></i>
              </div>
            </div>
          </ng-template>
          <ng-template AccordionContent>
            <div class="P-4">
              This is a <strong>complete custom header</strong> implementation.
            </div>
          </ng-template>
        </AccordionItem>
      </Accordion>