Toggler

Description

A toggler is an interaction that coordinates 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.

Attributes

Basic Advanced JavaScript

data-ur-set="toggler": add this attribute to an element that wraps the whole interaction
data-ur-toggler-component="button": add this attribute to the button
data-ur-toggler-component="content": add this attribute to the content

Required


                  
                    
                      data-ur-toggler-component="button"

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


                  
                    
                      data-ur-toggler-component="content"

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

Optional


                  
                    
                      data-ur-toggler-component="drawer"

enables sliding menus for togglers on the body element
sample implementation uses custom flexbox CSS for recommended functionality
multiple?: false
state: enabled / disabled (default)

You can also directly initialize the widget in JavaScript (components can be passed in as strings/elements/arrays):

Uranium.lib.toggler({
  button: "#a",
  content: "#b"
});

Demonstration

Example

Click on the button

And content appears

The Code

    <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>

Recommended Styles

SCSS CSS

    /* Recommended SCSS Styling */
    
    [data-ur-toggler-component="content"] {
      display: none;
      &[data-ur-state="enabled"] {
        display: block;
      }
    }

    /* Recommended CSS Styling */
    
    [data-ur-toggler-component="content"] {
      display: none;
    }
    [data-ur-toggler-component="content"][data-ur-state="enabled"] {
      display: block;
    }

Toggler Examples

Enabled

If we want something to start out visible, and then disappear when we click on the button, we can just add the data-ur-state="enabled" attribute to the button and its content.

Example The Code

Toggle This Picture!

    <div data-ur-set="toggler">
      <div data-ur-toggler-component="button" data-ur-state="enabled">
        Toggle This Picture!
      </div>
      <div data-ur-toggler-component="content" data-ur-state="enabled">
         <img src="/images/popup.jpeg">
      </div>
    </div>

Nested Togglers

It's super-easy to nest togglers as well. Click on the button, and then click on the text that shows up below. (Notice how the sub-togglers even remember what state they were in when you toggle the main button.)

Example The Code

Foods

Veggies
- Beets
- Carrots
Meats
- Beef
- Fish

    <div data-ur-set="toggler">
      <p data-ur-toggler-component="button">Foods</p>
      <ul data-ur-toggler-component="content">
        <li data-ur-set="toggler">
          <div data-ur-toggler-component="button">Veggies</div>
          <ul data-ur-toggler-component="content">
            <li>Beets</li>
            <li>Carrots</li>
          </ul>
        </li>
        <li data-ur-set="toggler">
          <div data-ur-toggler-component="button">Meats</div>
          <ul data-ur-toggler-component='content'>
            <li>Beef</li>
            <li>Fish</li>
          </ul>
        </li>
      </ul>
    </div>

Toggler Drawer Example

Demonstrates styling and formatting for a horizontal sliding menu

Note: This example uses flexbox CSS to activate the visual drawer behavior, but the Uranium behavior is the same across all browsers, and you may implement the visual effects any way you prefer.