AdminLTE/docs/javascript/card-widget.md

layout	title
page	Card Widget Plugin

The card widget plugin provides the functionality for collapsing, expanding and removing a card.

Usage

This plugin can be activated as a jQuery plugin or using the data api.

Data API

{: .text-bold }

This plugin provides two data-api attributes. Any element using one of the following attributes should be placed within the .card-tools div, which is usually in the card header. For more information about the [card HTML structure]({% link components/cards.md %}), visit the card component documentation

data-card-widget="collapse"
This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.

Collapsible Card Example

The body of the card

```html

Collapsible Card Example

The body of the card

``` {: .max-height-300}

data-card-widget="remove"
This attribute, when attached to a button, allows the box to be removed when clicked.

Removable Card Example

The body of the card

```html

Removable Card Example

The body of the card

``` {: .max-height-300}

data-card-widget="maximize"
This attribute, when attached to a button, allows the box to be maximize/minimize when clicked.

Maximizable Card Example

The body of the card

```html

Maximizable Card Example

The body of the card

``` {: .max-height-300}

jQuery

{: .text-bold } To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default data-card-widget selectors.

$('#my-card').CardWidget(options)

Options

{: .mt-4}

|---

Name	Type	Default	Description
animationSpeed	Number	300	Speed of slide down/up animation in milliseconds.
collapseTrigger	String	[data-card-widget="remove"]	jQuery selector to the element responsible for collapsing the box.
removeTrigger	String	[data-card-widget="collapse"]	jQuery selector to the element responsible for removing the box.
maximizeTrigger	String	[data-card-widget="maximize"]	jQuery selector to the element responsible for maximizing the box.
{: .table .table-bordered .bg-light}

Tip!

You can use any option via the data-attributes like this.

<button type="button" class="btn btn-tool" data-card-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>

{: .quote-info}

Events

{: .mt-4}

|---

Event Type	Description
expanded.lte.cardwidget	Triggered after a card expanded.
collapsed.lte.cardwidget	Triggered after a card collapsed.
maximized.lte.cardwidget	Triggered after a card maximized.
minimized.lte.cardwidget	Triggered after a card minimized.
removed.lte.cardwidget	Triggered after a card removed.
{: .table .table-bordered .bg-light}

Example: $('#my-card').on('expanded.lte.cardwidget', handleExpandedEvent)

Methods

{: .mt-4}

|---

Method	Description
collapse	Collapses the card
expand	Expands the card
remove	Removes the card
toggle	Toggles the state of the card between expanded and collapsed
maximize	Maximizes the card
minimize	Minimizes the card
toggleMaximize	Toggles the state of the card between maximized and minimized
{: .table .table-bordered .bg-light}

Example: $('#my-card-widget').CardWidget('toggle') or $('#my-card').CardWidget('toggle')