Material Design Hierarchical Display

The jQuery plugin for hierarchical display animation effect

Hierarchical Timing is a meaningful transition introduced in Google Material Design that focuses your users attention in an app or how an app element got from point A to point B.

   Download 1.0.1

Version 1.0.1    GitHub Project    Created by Sergey Kupletsky
Getting Started
  1. Download latest version of plugin from this site or GitHub.
  2. Unpack the entire material-design-hierarchical-display archive into your project.
  3. In the <head> of your html, reference the location to your zmd.hierarchical-display.min.css.

    <link rel="stylesheet" href="path/to/material-design-hierarchical-display/zmd.hierarchical-display.min.css">
  4. In the end of your html, reference the location to your jquery.zmd.hierarchical-display.min.js.

    <script src="path/to/material-design-hierarchical-display/jquery.zmd.hierarchical-display.min.js"></script>

    You need to include jquery.zmd.hierarchical-display.js after jQuery. Requires jQuery 1.7+.

  5. Add data-animation="hierarchical-display" to parent element that contains children elements which you want to display - for display elements on page loads.

    
                                

    Also you can activate plugin manually from JavaScript: $(elem).hierarchicalDisplay();

Simple Demo
Demo With Animate.css

Documentation

Stylesheet

The MD Hierarchical Display plugin utilizes a few classes to handle the heavy lifting:

  • .zmd-hierarchical-display hides the content.
  • .zmd-hierarchical-display.in shows the content.
  • .zmd-hierarchical-displaying is added when the animation starts, and removed when it finishes.

These classes can be found in component.less.

You don't need to add the class zmd-hierarchical-display to the displaying element - it will be added automaticly. If you'd like it to default close, add class zmd-hierarchical-display, for default open, add the additional class in.

Also it require CSS animation from animation.less. But you can easily change it to your favorite animation library - for example animate.css.
See demo with animate.css on CodePen or on this page in demo section.

Documentation

Options

All options of the plugin can be set via the corresponding data attributes, for example: data-speed for speed option or data-animation-in for animationIn option.

Method that should be executed when you call the plugin.
default: show

Plugin speed. You can use decimal values, for example: 0.1.
default: 5

Animation CSS class that should be added to displaying element when element is showing.
default: zoomIn

Animation CSS class that should be added to displaying element when element is hiding.
default: zoomOut

Spams your console with information about the events.
default: false

Documentation

Methods
Public methods that provides by plugin.

Initializes the plugin with an optional options object and starts working.

$('.zmd-hierarchical-display').hierarchicalDisplay({
                        speed: 10
                        })

Shows a displaying element.

Hides a displaying element.

Toggles a displaying element to shown or hidden.

Documentation

Events

Material Design Hierarchical Display plugin exposes a few events for hooking into displaying functionality.

This event fires immediately when the show instance method is called.

This event is fired when a displaying element has been made visible to the user (will wait for CSS animations to complete).

This event fires immediately when the hide instance method is called.

This event is fired when a displaying element has been hidden from the user (will wait for CSS animations to complete).

Author
Browser support
  • Chrome
    4+
  • Firefox
    16+
  • Opera
    12.1+
  • Safari
    4+
  • IE
    10+

Browser support specified in accordance to caniuse.com portal (you can check CSS3 2D Transforms and animation).

License

MD Hierarchical Display plugin is licensed under the MIT license. (http://opensource.org/licenses/MIT)