Toggler

Description

A toggler is a widget that has two components - a button, and a set of contents.

When you click the button, the states (of both the button and the contents) are toggled.

Basic

Advanced

Attributes

data-ur-set="toggler": add this attribute to a div that wraps the whole widget
data-ur-toggler-component="button": add this attribute to the button
data-ur-toggler-component="content": add this attribute to the content

data-ur-set=

"toggler"

data-ur-toggler-component=

Required

"content"

add this attribute to each content item
multiple?: true
state: enabled / disabled(default)

"button"

add this attribute to the button (i.e. the thing to be clicked)
multiple?: false
state: enabled / disabled(default)

Demonstration

Example

The Code

Click on the button

And content appears

<div data-ur-set="toggler">
  <div data-ur-toggler-component="button">
    Click on the button
  </div>
  <div data-ur-toggler-component="content">
    And content appears</div>
</div>

Required Styles

      /* Required SCSS Styling */
      *[data-ur-set='toggler'] {
        /* By Default content is hidden*/
        *[data-ur-toggler-component='content'] {
          display:none;
        }
        *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
          display: block;
        }
      }
      /* Required CSS Styling */

      *[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
        display:none;
      }
      *[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
        display: block;
      }

Toggler Examples

Popup

In this style, we want an image to appear when we click on the button.

Click Here !

Nested Togglers

It's super-easy to nest togglers as well. You'll have to use ids. Give the button component and the content component the same attribute: data-ur-id="ID".

Foods

Veggies
- Beets
- Carrots
Meats
- Beef
- Fish