Box Widget Plugin

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

Usage

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

Data Api

This plugin provides two data-api attributes. Any element using one of the following attributes must be placed within the .box-tools div, which is usually in the box header. For more information about the box HTML structure, visit the box component documentation

data-widget="collapse"

This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.

Collapsible Box Example

The body of the box
data-widget="remove"

This attribute, when attached to a button, allows the box to be removed when clicked.

Removable Box Example

The body of the box

jQuery

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

Options

Name Type Default Description
animationSpeed Number 500 Slide animation speed in milliseconds
collapseTrigger String [data-widget="collapse"] jQuery selector to the element responsible for collapsing the box
removeTrigger String [data-widget="remove"] jQuery selector to the element responsible for removing the box
collapseIcon String fa-minus The CSS class for the collapse icon
expandIcon String fa-plus The CSS class for the expand icon
removeIcon String fa-times The CSS class for the remove icon

Events

Name Description
expanded.boxwidget Triggered after the box is expanded.
collapsed.boxwidget Triggered after the box is collapsed.
removed.boxwidget Triggered after the box is removed.

Example: $('#my-box').on('expanded.boxwidget', handleExpandedEvent)

Methods

Method Description
toggle Toggles the state of the box between expanded and collapsed
expand Expands the box
collapse Collapses the box.
remove Removes the box.

Example: $('#my-box-widget').boxWidget('toggle')

PREMIUM TEMPLATE
Material Dashboard Pro

Material Dashboard Pro ─ $59

Angular 2 Premium Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design

Preview Buy Now

853+ purchases