Skip to content
AngularJS directive for slide-down animation
JavaScript CoffeeScript HTML CSS
Branch: master
Clone or download
TheRusskiy Merge pull request #23 from yaegerbomb/master
Updated with documentation of keep-alive
Latest commit 62853af Oct 6, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Added keep-alive attribute to stop ng-if from recompiling the templat… Oct 5, 2016
src Added keep-alive attribute to stop ng-if from recompiling the templat… Oct 5, 2016
.gitignore Initial commit Jul 19, 2014
Gruntfile.js Initial commit Jul 19, 2014 updated readme to include keep-alive documentation Oct 5, 2016
bower.json update angular version Jun 1, 2016
package.json update angular version Jun 1, 2016

Ng Slide Down

AngularJS directive for vertical slide down animation (JS Fiddle).


Just add this module as a dependency:

angular.module("myApp", ['ng-slide-down'])

You can download this module from bower using

bower install ng-slide-down


In order to use a directive add attribute ng-slide-down to an element you want to hide. Pass some variable to it as a value and it's going to serve as a trigger to expand/hide the element: lazy-render="someVariable".


Lazy rendering

Has option to prevent HTML generation of contents unless expanded (due to performance considerations). Optimal for a big number of widgets (production tested). All you need to do is to add lazy-render attribute to an element with a directive.

Keep Alive

Additionally, if you need to keep the contents of the expand and collapse from recompiling after the initial expand takes place, adding keep-alive will prevent re-rendering of the html template. This is usefull if you are expanding / collpasing content that may contain directives / components that makes API calls on initializtion.

Automatic height adjustment

Directive watches for a height of it's content and readjusts it's size automatically - no extra work required.


ng-slide-down (required)

Main attribute, required for directive to work, passed variable defines whether element should slide down or slide up

<div ng-slide-down="slideDown">


Time in seconds for animation to complete (default is 1 second).

<div ng-slide-down="slideDown" duration="1.5">


Easing function (transition-timing-function) to use in the animation (default is ease-in-out).

<div ng-slide-down="slideDown" timing-function="linear">


Add this attribute to prevent rendering when content is hidden. Doesn't require value.

<div ng-slide-down="slideDown" lazy-render>


Add this attribute to prevent recompiling of content in the template. Useful for content that may contain addition directives / components that receive data from an API.

<div ng-slide-down="slideDown" lazy-render keep-alive>


Expression evaluated when slider is finished closing

<div ng-slide-down="slideDown" on-close="someVariable = true">


Message emitted when slider is finished closing

<div ng-slide-down="slideDown" emit-on-close="widget_closed">

Then you can subscribe to it in an outer scope:

$scope.on('widget_closed', function() { /* do stuff */ });

Usage example

Full version can be found on JS Fiddle

<div ng-click="widgetExpanded = !widgetExpanded">
  Click to slide in/out
<div ng-slide-down="widgetExpanded" lazy-render duration="1">
  Some awesome content here

Words of caution

Lazy render may not work for older angular versions due to a bug (fixed on 20.05.2014). Make sure to update your angular.

If your content has padding or margins make sure to wrap it into div without them.

<div ng-slide-down="slideDown">
    <div> <!-- wrapper -->  
    ... content with padding ...

Building yourself

Source code is written in CoffeeScript, in order to build it just run grunt command in your CLI and it will take care of compiling to JS and minifying.


Oh darling... You are always welcome!


This code is released under the MIT License.

You can’t perform that action at this time.