Tailwind CSS Collapse with Angular

Use our Tailwind CSS collapse for your website. You can use it for accordion, collapsible items and much more.

See below our simple Collapse example that you can use in your Tailwind CSS and Angular project.

You first need to import the DUICollapse Module into your application module. 

    
 import { DUICollapse } from "david-ui-angular";
 
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, DUICollapse],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}

Use our David UI collapse for your website. You can use if for accordion, collapsible items and much more. 

    
  <!-- Use DUI Collapse in html file -->
  <dui-button (click)="toggleCollapse()">Toggle Collapse</dui-button>
  <dui-collapse [open]="open" className="my-4 mx-auto w-8/12">
    <dui-typography>
      Use our Tailwind CSS collapse for your website. You can use if for
      accordion, collapsible items and much more.
    </dui-typography>
  </dui-collapse>

collapse Properties

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

AttributeType Description Default
classNamestringAdd custom className for collapse''
openbooleanChange collapse visibilityfalse