Slide Down #

Each jQuery plugin to display blocks can do it differently. It’s essential for sliding blocks, which are obviously "sliding" and shifting content.

Demo ##

Installation ##

Use Bower:

``
$ bower install slide-down
`

Or npm

`
$ npm install slide-down
`

If the above methods do not work, download from GitHub

Setup ##

`html






`

Markup ##

`html

Text






`

Options ##

$3

If an open block is required on default, you should add the .slide_down--active class to the block with the [data-slidedown-target] attribute

$3

The basic animation can be modified. Do this requires adding [data-animation] , that will indicate the type and speed of the animation, a data-slidedown-target block:

* ease — Regular animation, default
* ease-fast — Regular animation, fast speed
* ease-slow — Regular animation, slow speed
* bounce — "Bounce" animation, normal speed
* bounce-fast — "Bounce" animation, fast speed
* bounce-slow — "Bounce" animation, slow speed


`html




`

$3

If you want the blocks to be interdependent (only one block can always be opened), it’s necessary to add a [data-sync] attribute to each dependent block with the [data-slidedown-target] attribute


`html







`

Methods ##


`javascript
// This will open an assigned block
$.slideDown.open("id or $('element')");
// This will close an assigned block
$.slideDown.close("id or $('element')");
// This will close all or all assigned blocks
$.slideDown.closeAll("empty or $('elements')");
``

Browsers ##

CSS3 animation is used. If the browser does not support animation, the blocks will be shown as hide / show

* IE 9+
* Chrome 8+
* Firefox 10+
* Safari 3+
* Opera 10.6+

License ##

MIT