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

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, 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

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Collapsible Card Example</h3>
    <div class="card-tools">
      <!-- Collapse Button -->
      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->

`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

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Removable Card Example</h3>
    <div class="card-tools">
      <!-- Remove Button -->
      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->

`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

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Maximizable Card Example</h3>
    <div class="card-tools">
      <!-- Maximize Button -->
      <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->

jQuery

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

Name	Type	Default	Description
animationSpeed	Number	300	Speed of slide down/up animation in milliseconds.
collapseTrigger	String	`[data-card-widget="collapse"]`	jQuery selector to the element responsible for collapsing the box.
removeTrigger	String	`[data-card-widget="remove"]`	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.

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>

Events

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.

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

Methods

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

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