Component jQuery API

Bootstrap drawer comes with drawer.js to be added to the bootstrap.js component suite. If you're including separate components, drawer.js depends on transition.js plugin.

drawer.js is built similarly to collapse.js.

Example

Usage

The drawer plugin utilizes a few classes to do all the work:

• .fold hides content
• .fold.open shows content.
• .folding is applied during transitions, and removed when it finishes.

These classes can be found in less/mixins/drawer-framework.less. They are built in loops with the .dw-SIZE-# classes because they utilize margins based on the column width.

Via data attributes

Just add data-toggle="drawer" and a data-target to the element to automatically assign control of drawer element. The data-target attribute accepts a CSS selector to apply the folding animation to. Be sure to add the class .fold to the collapsible element. If you'd like it to default open, add the additional class .open.

Via JavaScript

Enable manually with:

$('.drawer').drawer();

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Methods

.drawer(options)

Activates your content as a drawer element. Accepts an optional options object.

$('#myDrawer').drawer({
    toggle: false
});

.drawer('toggle')

Toggles a drawer element as folded or open.

.drawer('show')

Shows drawer element as opened.

.drawer('hide')

Hide a drawer element.

Events

drawer-bootstrap drawer class exposes drawer events (very similarly to how Bootstrap collapse) for hooking into the drawer functionality.

$('#myDrawer').on('hidden.bs.drawer', function() {
    // do something here...
});