boost-js-collapse

0.0.1 • Public • Published

Boost JS Collapse Build Status

A style-free and accessible collapse plugin for jQuery and Boost JS. While other plugins style everything for you, this plugin only handles the functionality, leaving the layout and styling up to you.

Installation

Install with npm:

npm install boost-js-collapse

Install in browser:

<script src="https://cdn.rawgit.com/marksmccann/boost-js-collapse/v0.0.1/dist/collapse.min.js"></script>

Usage

Create Plugin

var boost = require('boost-js');
// var boost = $.fn.boost; (browser install)
 
var collapse = require('boost-js-collapse');
// var collapse = $.fn.boost.collapse; (browser install)
 
$.fn.collapse = boost( collapse.plugin, collapse.defaults );

Markup Structure

<div id="collapse">
    <a href="#drawer1" data-bind="#collapse" data-role="handle">Handle 1</a>
    <div id="drawer1" data-bind="#collapse" data-role="drawer">Drawer 1</div>
    <a href="#drawer2" data-bind="#collapse" data-role="handle">Handle 2</a>
    <div id="drawer2" data-bind="#collapse" data-role="drawer">Drawer 2</div>
</div>

Note: data-bind is used to link the element to the instance, data-role is used to define the element's role in that instance. See Boost JS for more details.

Instantiate Plugin

$('#collapse').collapse();

Options

Name Default Description
accordian false when true, will only open one drawer at a time
activeClass "is-open" the class added to handle and drawer when active
onOpen null a callback function called when any drawer opens
onClose null a callback function called when any drawer closes
onInit null a callback function called when plugin is intialized

Usage

$('#collapse').collapse({
    onInit: function() {
     console.log( this.id ); // 'collapse'
    }
});

- or -

<div id="collapse" data-accordian="true">...</div>

API

openDrawer( 'drawerID', callback )

Open a drawer by providing the desired panel's id. Optional callback function called after opening. If drawer is already open, callback will not be run.

instance.openDrawer( 'drawer2', function(){
    console.log("Drawer 2 is now open.");
});

closeDrawer( 'drawerID', callback )

Close a drawer by providing the desired drawer's id. Optional callback function called after closing. If drawer is already closed, callback will not be run.

instance.closeDrawer( 'drawer2', function(){
    console.log("Drawer 2 is now closed.");
});

toggleDrawer( 'drawerID', callback )

Will toggle a given drawer open or close. Optional callback function called whether opened or closed.

instance.toggleDrawer( 'drawer2' );

drawerIsOpen( 'drawerID', callback )

Determine whether a given drawer is open or not.

instance.drawerIsOpen( 'drawer2' ); // true or false

activeDrawers

The ids of the currently active drawers in an array

instance.activeDrawers // [ drawer1, drawer2 ... ]

pairsByDrawer

Each handle and corresponding drawer grouped into a jquery object and organized by drawer id.

instance.pairsByDrawer // { drawer1: $( 0:handle1, 1:drawer1 ), ... }

Running Tests

$ npm install && npm test

License

Copyright © 2016, Mark McCann. Released under the MIT license.

Readme

Keywords

Package Sidebar

Install

npm i boost-js-collapse

Weekly Downloads

2

Version

0.0.1

License

MIT

Last publish

Collaborators

  • marksmccann