This breathes life into your DOM and unlocks a set of data attributes to quickly build interfaces. Combined with some smart CSS, you can use these data attributes to create tabs, toggles, popups, caroussels, fancy radio buttons and almost anything you could want. I generally only use this for prototyping things, but you could use it for small projects.

How to use

You activate a certain scope in your DOM:

import Energize from './energize.js';
new Energize('#my-app');

And then you can use data attributes to add and remove a class from different elements in different ways:

<section id="example">
  <a data-open="#left" class="active">Left</a>
  <a data-open="#center">Center</a>
  <a data-open="#right">Right</a>

  <div class="tab active" id="left" data-group="tabs" data-follower="a[data-open='#left']">
    <p>I'm behind the leftmost link!</p>
    <a data-close="#left">Close me</a>
  </div>

  <div class="tab" id="center" data-group="tabs" data-follower="a[data-open='#center']">
    <p id="colour">I'm the panel behind the center link</p>
    <a data-toggle="#colour">Toggle me!</a>
  </div>

  <div class="tab" id="right" data-group="tabs" data-follower="a[data-open='#right']" data-timer="2000">
    <p>I'm the last panel, behind the rightmost link</p>
    <p>I disappear automatically after two seconds</p>
  </div>
</section>

The default class that gets put on your elements is active, the default data attributes are:

• data-open — A selector to put the active class on when clicked
• data-close — A selector to remove the active class from when clicked
• data-toggle — A selector to toggle the active class on when clicked
• data-group — If I get the active class, remove it from others in my group
• data-timer — If I get the active class, remove it again after this many milliseconds
• data-follower — A selector for another element that follows my behaviour

If you wish, you can override the class name and the names of all the attributes as options to the Energize constructor.