Toggler

• Introduction
• Basic Example
• Real World Example

Allows users to toggle content on and off.

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Toggler module.

YUI().use(
  'aui-toggler',
  function(Y) {
    // code goes here
  }
);

Using Toggler

Create a HTML element with some content to toggle on/off:

<div id="myToggler">
  <button class="header toggler-header-collapsed">Read More</button>
  <p class="content toggler-content-collapsed">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>

Now create a new instance of Toggler component, then pass it the container where it's going to be attached and header and content where we placed our header and content html. Finally, let's render it!

YUI().use(
  'aui-toggler',
  function(Y) {
    new Y.Toggler(
      {
        container: '#myToggler',
        content: '.content',
        header: '.header'
      }
    ).render();
  }
);

Configuring Toggler

There are some other options that you can pass to your Toggler instance.

For example, if you set animated for true and pass an object to transition which specifies duration and easing, Toggler will use animated transitions between states.

YUI().use(
  'aui-toggler',
  function(Y) {
    new Y.Toggler(
      {
        animated: true,
        container: '#myToggler',
        content: '.content',
        header: '.header',
        transition: {
          duration: .5,
          easing: 'cubic-bezier'
        }
      }
    ).render();
  }
);

You can use the javascript constructor TogglerDelegate to assign toggler functionality for all toggler content elements within the container. You can even set closeAllOnExpand for true to only allow one content box open at a time. Don't forget to add multiple content and header boxes to your html container!

<div id="myToggler">
  <button class="header toggler-header-collapsed">Read More</button>
  <p class="content toggler-content-collapsed">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  <button class="header toggler-header-collapsed">Read More</button>
  <p class="content toggler-content-collapsed">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  <button class="header toggler-header-collapsed">Read More</button>
  <p class="content toggler-content-collapsed">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>

YUI().use(
  'aui-toggler',
  function(Y) {
    new Y.TogglerDelegate(
      {
        animated: true,
        closeAllOnExpand: true,
        container: '#myToggler',
        content: '.content',
        header: '.header',
        transition: {
          duration: .5,
          easing: 'cubic-bezier'
        }
      }
    ).render();
  }
);