Expandable section

The expandable section is used to show and hide context information.

The expandable section component provides basic expand/collapse functionality based on the expandable panel but contains a header (<dt-expandable-section-header>), which is the trigger of the expandable panel.

´ Loading interactive demo...
<dt-expandable-section> <dt-expandable-section-header> My header text </dt-expandable-section-header> {{ text }} </dt-expandable-section> export class ExpandableSectionDefaultExample { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; } <dt-expandable-section> <dt-expandable-section-header> My header text </dt-expandable-section-header> {{ text }} </dt-expandable-section> export class ExpandableSectionDefaultExample { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; }

Imports

You have to import the DtExpandableSectionModule when you want to use the dt-expandable-section. The dt-expandable-section component also requires Angular's BrowserAnimationsModule for animations. For more details on this see Step 2: Animations in the getting started guide.

@NgModule({
  imports: [DtExpandableSectionModule, BrowserAnimationsModule],
})
class MyModule {}

Initialization

To apply the expandable panel, use the <dt-expandable-section> element.

Attribute Description
dt-expandable-section The expandable section.
dt-expandable-section-header The component, which contains the content of the header.

Inputs

Name Type Default Description
expanded boolean false Sets or gets the section's expanded state.
disabled boolean false Sets or gets the section's disabled state.

In most cases the expandable section is closed by default, but it can also be set to expanded.

´ Loading interactive demo...
<dt-expandable-section [expanded]="true"> <dt-expandable-section-header> My header text </dt-expandable-section-header> {{ text }} </dt-expandable-section> export class ExpandableSectionOpenExample { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; } <dt-expandable-section [expanded]="true"> <dt-expandable-section-header> My header text </dt-expandable-section-header> {{ text }} </dt-expandable-section> export class ExpandableSectionOpenExample { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; }

Outputs

Name Type Description
expandChange Observable<boolean> Emits an event when the expanded state changes.
expanded Observable<boolean> Event emitted when the panel is expanded.
collapsed Observable<boolean> Event emitted when the panel is collapsed.

Methods

Name Type Description
toggle boolean Toggles the expanded state, i.e. changes it to expanded if collapsed, or vice-versa.
open void Expands the panel.
close void Collapses the panel.

See all methods in action in the following example.

´ Loading interactive demo...
<dt-expandable-section #section [disabled]="sectionDisabled"> <dt-expandable-section-header> My header text </dt-expandable-section-header> {{ text }} </dt-expandable-section> <button dt-button (click)="section.open()" [disabled]="section.expanded || sectionDisabled" > Open </button> <button dt-button (click)="section.close()" [disabled]="!section.expanded || sectionDisabled" > Close </button> <button dt-button (click)="section.toggle()" [disabled]="sectionDisabled"> Toggle </button> <button dt-button (click)="sectionDisabled = !sectionDisabled"> Disable / Enable </button> export class ExpandableSectionInteractiveExample { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; sectionDisabled = false; } <dt-expandable-section #section [disabled]="sectionDisabled"> <dt-expandable-section-header> My header text </dt-expandable-section-header> {{ text }} </dt-expandable-section> <button dt-button (click)="section.open()" [disabled]="section.expanded || sectionDisabled" > Open </button> <button dt-button (click)="section.close()" [disabled]="!section.expanded || sectionDisabled" > Close </button> <button dt-button (click)="section.toggle()" [disabled]="sectionDisabled"> Toggle </button> <button dt-button (click)="sectionDisabled = !sectionDisabled"> Disable / Enable </button> export class ExpandableSectionInteractiveExample { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; sectionDisabled = false; }

States

The expandable section's trigger has a default, hover, active, focus and disabled state. The following example shows a disabled expandable section.

´ Loading interactive demo...
<dt-expandable-section disabled> <dt-expandable-section-header> My header text </dt-expandable-section-header> {{ text }} </dt-expandable-section> export class ExpandableSectionDisabledExample { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; } <dt-expandable-section disabled> <dt-expandable-section-header> My header text </dt-expandable-section-header> {{ text }} </dt-expandable-section> export class ExpandableSectionDisabledExample { text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`; }

Theming

The expandable section can be placed on a dark background.

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <dt-expandable-section> <dt-expandable-section-header> My header text </dt-expandable-section-header> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-section> </div> export class ExpandableSectionDarkExample {} <div class="dark" dtTheme=":dark"> <dt-expandable-section> <dt-expandable-section-header> My header text </dt-expandable-section-header> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-expandable-section> </div> export class ExpandableSectionDarkExample {}

Expandable section in use

Currently, the expandable section is used in combination with several components, e.g. Tags.