Collapse

Collapse Component

The Collapse component is used to toggle the visibility of content.

Inheritance

Collapse : BootstrapComponentBase

Methods

Name	Desription
HideAsync	Hides the contents of the Collapse.
Hide	The sync version of HideAsync.
ShowAsync	Shows the contents of the Collapse.
Show	The sync version of ShowAsync.
ToggleAsync	Toggles the contents of the Collapse.
Toggle	The sync version of ToggleAsync.

Event Callbacks

Name	Desription
OnShow	Called when the Collapse is starting to show.
OnShown	Called when the Collapse is completely shown.
OnHide	Called when the Collapse is starting to hide.
OnHidden	Called when the Collapse is completely hidden.

Examples

Using the Collapse component is demonstrated by the sample code below.

Controlling Visibility

This sample shows you how you interact with the Collapse component from your code.

@code {
    Collapse collapse1;
}

<ButtonGroup>
    <Button OnClicked="() => this.collapse1.Show()">Show</Button>
    <Button OnClicked="() => this.collapse1.Hide()">Hide</Button>
    <Button OnClicked="() => this.collapse1.Toggle()">Toggle</Button>
</ButtonGroup>
<Collapse @ref="this.collapse1">
    <Paragraph>
        This is the content inside the <code>Collapse</code> component that you can control with the buttons above.
    </Paragraph>
</Collapse>

Handling Events

Shows how you can hook into the events that the Collapse component exposes.

<Collapse
    OnShow="() => { ... }"
    OnShown="() => { ... }"
    OnHide="() => { ... }"
    OnHidden="() => { ... }">

    <Paragraph>
        Content of the Collapse component.
    </Paragraph>
</Collapse>