Tailwind CSS Accordion with Angular

Use our Tailwind CSS Accordion built with Angular to organize large amounts of content or navigation lists in limited space on your website.

The accordion is a UI component used by web designers that allows the content to be collapsed and expanded. When properly implemented, accordions can improve the user experience by presenting content in an easy-to-scan format, allowing users to quickly navigate to the information they're interested in.

Below we present you our Angular Accordion example crafted with Tailwind CSS that will help you build enterprise-level applications with ease. You need to import the BrowserAnimationModule into your application.

     
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import {DUIAccordion} from 'david-ui-angular';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      CommonModule,
      DUIAccordion
    ],
    bootstrap: [AppComponent],
  })
  export class AppModule {}

After that you can use the accordion component like this:

What is David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

How to use David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

What can I do with David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

     <dui-accordion>
  <dui-accordion-expansion>
    <dui-accordion-header title="What is David UI Angular?"></dui-accordion-header>
    <dui-accordion-body>
      We're not always in the position that we want to be at. We're constantly growing. We're constantly making
      mistakes. We're constantly trying to express ourselves and actualize our dreams.
    </dui-accordion-body>
  </dui-accordion-expansion>
  <dui-accordion-expansion>
    <dui-accordion-header title="How to use David UI Angular?"></dui-accordion-header>
    <dui-accordion-body>
      We&apos;re not always in the position that we want to be at. We&apos;re constantly
      growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
      ourselves and actualize our dreams.
    </dui-accordion-body>
  </dui-accordion-expansion>
  <dui-accordion-expansion>
    <dui-accordion-header title="What can I do with David UI Angular?"></dui-accordion-header>
    <dui-accordion-body>
      We&apos;re not always in the position that we want to be at. We&apos;re constantly
    growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
    ourselves and actualize our dreams.
    </dui-accordion-body>
  </dui-accordion-expansion>
</dui-accordion>

Accordion with Icon

You can also show Icon in Accordion component by using the property showIcon of the dui-accordion-header selector.

What is David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

How to use David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

What can I do with David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

     <dui-accordion>
<dui-accordion-expansion>
  <dui-accordion-header [showIcon]="true" title="What is David UI Angular?"></dui-accordion-header>
  <dui-accordion-body>
    We're not always in the position that we want to be at. We're constantly growing. We're constantly making
    mistakes. We're constantly trying to express ourselves and actualize our dreams.
  </dui-accordion-body>
</dui-accordion-expansion>
<dui-accordion-expansion>
  <dui-accordion-header [showIcon]="true" title="How to use David UI Angular?"></dui-accordion-header>
  <dui-accordion-body>
    We&apos;re not always in the position that we want to be at. We&apos;re constantly
    growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
    ourselves and actualize our dreams.
  </dui-accordion-body>
</dui-accordion-expansion>
<dui-accordion-expansion>
  <dui-accordion-header [showIcon]="true" title="What can I do with David UI Angular?"></dui-accordion-header>
  <dui-accordion-body>
    We&apos;re not always in the position that we want to be at. We&apos;re constantly
  growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
  ourselves and actualize our dreams.
  </dui-accordion-body>
</dui-accordion-expansion>
</dui-accordion>

Accordion Always Open

You can make an Accordion component to be always open and doesn't close when it's next or previous Accordion component opened using a separate state.

What is David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

How to use David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

What can I do with David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

      <dui-accordion>
  <dui-accordion-expansion [alwaysOpen]="true">
    <dui-accordion-header
      [showIcon]="true"
      title="What is David UI Angular?"
    >
    </dui-accordion-header>
    <dui-accordion-body>
      We're not always in the position that we want to be at. We're
      constantly growing. We're constantly making mistakes. We're
      constantly trying to express ourselves and actualize our dreams.
    </dui-accordion-body>
  </dui-accordion-expansion>
  <dui-accordion-expansion>
    <dui-accordion-header
      [showIcon]="true"
      title="How to use David UI Angular?"
    ></dui-accordion-header>
    <dui-accordion-body>
      We&apos;re not always in the position that we want to be at.
      We&apos;re constantly growing. We&apos;re constantly making
      mistakes. We&apos;re constantly trying to express ourselves and
      actualize our dreams.
    </dui-accordion-body>
  </dui-accordion-expansion>
  <dui-accordion-expansion>
    <dui-accordion-header
      [showIcon]="true"
      title="What can I do with David UI Angular?"
    ></dui-accordion-header>
    <dui-accordion-body>
      We&apos;re not always in the position that we want to be at.
      We&apos;re constantly growing. We&apos;re constantly making
      mistakes. We&apos;re constantly trying to express ourselves and
      actualize our dreams.
    </dui-accordion-body>
  </dui-accordion-expansion>
  </dui-accordion>

Accordion Disabled

An Accordion could be disabled as well, it will help you to prevent user interactions like click over the Accordion component.

What is David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

How to use David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

What can I do with David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

      <dui-accordion>
  <dui-accordion-expansion [isDisable]="true">
    <dui-accordion-header
      [showIcon]="true"
      title="What is David UI Angular?"
    >
    </dui-accordion-header>
    <dui-accordion-body>
      We're not always in the position that we want to be at. We're
      constantly growing. We're constantly making mistakes. We're
      constantly trying to express ourselves and actualize our dreams.
    </dui-accordion-body>
  </dui-accordion-expansion>
  <dui-accordion-expansion>
    <dui-accordion-header
      [showIcon]="true"
      title="How to use David UI Angular?"
    ></dui-accordion-header>
    <dui-accordion-body>
      We&apos;re not always in the position that we want to be at.
      We&apos;re constantly growing. We&apos;re constantly making
      mistakes. We&apos;re constantly trying to express ourselves and
      actualize our dreams.
    </dui-accordion-body>
  </dui-accordion-expansion>
  <dui-accordion-expansion>
    <dui-accordion-header
      [showIcon]="true"
      title="What can I do with David UI Angular?"
    ></dui-accordion-header>
    <dui-accordion-body>
      We&apos;re not always in the position that we want to be at.
      We&apos;re constantly growing. We&apos;re constantly making
      mistakes. We&apos;re constantly trying to express ourselves and
      actualize our dreams.
    </dui-accordion-body>
  </dui-accordion-expansion>
  </dui-accordion>

Accordion With Custom Style

You can use tailwind css classes to add custom styles to the Accordion component.

What is David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

How to use David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

What can I do with David UI Angular?

We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.

     <dui-accordion>
    <dui-accordion-expansion
    [alwaysOpen]="true"
      className="mb-2 rounded-lg border border-blue-gray-100 px-4"
    >
      <dui-accordion-header
        title="What is David UI Angular?"
        className="border-b-0 transition-colors text-blue-500 hover:!text-blue-700"
      >
      </dui-accordion-header>
      <dui-accordion-body className="pt-0 text-base font-normal">
        We're not always in the position that we want to be at. We're
        constantly growing. We're constantly making mistakes. We're
        constantly trying to express ourselves and actualize our dreams.
      </dui-accordion-body>
    </dui-accordion-expansion>
    <dui-accordion-expansion
      className="mb-2 rounded-lg border border-blue-gray-100 px-4"
    >
      <dui-accordion-header
        title="How to use David UI Angular?"
      ></dui-accordion-header>
      <dui-accordion-body className="pt-0 text-base font-normal">
        We&apos;re not always in the position that we want to be at.
        We&apos;re constantly growing. We&apos;re constantly making
        mistakes. We&apos;re constantly trying to express ourselves and
        actualize our dreams.
      </dui-accordion-body>
    </dui-accordion-expansion>
    <dui-accordion-expansion
      className="mb-2 rounded-lg border border-blue-gray-100 px-4"
    >
      <dui-accordion-header
        title="What can I do with David UI Angular?"
      ></dui-accordion-header>
      <dui-accordion-body className="pt-0 text-base font-normal">
        We&apos;re not always in the position that we want to be at.
        We&apos;re constantly growing. We&apos;re constantly making
        mistakes. We&apos;re constantly trying to express ourselves and
        actualize our dreams.
      </dui-accordion-body>
    </dui-accordion-expansion>
  </dui-accordion>

Accordion Properties

The following properties are available for dui-accordion-expansion component. These are the custom properties that we've added for the accordion component and you can use all the other native properties as well.

Attribute	Type	Description	Default
`isDisable`	`boolean`	disable accordion component	`false`
`alwaysOpen`	`boolean`	set default to open accordion component	`false`
`className`	`string`	Add custom className for accordion expansion	`''`

Accordion Header Properties

The following properties are available for dui-accordion-header component. These are the custom properties that we've added for the accordion component and you can use all the other native properties as well.

Attribute	Type	Description	Default
`hideDivider`	`boolean`	show or hide accordion divider	`false`
`showIcon`	`boolean`	Add or remove the icon	`false`
`className`	`string`	Add custom className for accordion header	`''`
`title`	`string`	required property to add title to accordion header	`''`