Fork me on GitHub

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

    "button"
    • add this attribute to the button (i.e. the thing to be clicked)
    • multiple?: false
    • state: enabled / disabled(default)
    "content"
    • add this attribute to each content item
    • multiple?: true
    • 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.


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