Eventival Styleguide / Components / Toggle

Toggle

Toggle is our widely used JS function that allows to toggle specified classes. We use it, for example, for accordion and dropdown menus (except simple select boxes) and hamburger menu.

Toggle functionality

We use toggle functionality when we want to apply:

Accordion menu - this is the vertical menu where clicking the main item expands the section below it. Be expanding this section, other items that are not related to the menu move down.
Dropdown menu - this is the vertical menu where clicking the main item shows the section below it and this section overlays items visible behind it. The dropdown menu has to versions of opening: to the bottom and to the right.

Toggle itself contains two elements. However, to create a toggle dropdown you need to create another div element including two toggle elements described below

An element needed for triggering JS toggle. It needs to be added to the tag that is placed above the element with the toggle content.

It may contain the following:
- js-toggle class - triggers JavaScript
- toggle class - applies CSS styles
- icon-after/icon-before class - defines the icon position
- arrow-angle/arrow-caret/hamburger class - defines the icon
- checkbox-before class - defines the checkbox before toggle label
- data-toggle_target_id attribute - only in case that the js-toggle-content is not added to the next element or the parent of the next element (needed only in specific cases)
An element that contains the content. To create it, add the js-toggle-content class. It is usually "ul" or "div"
It may contain the following:
- js-toggle-content class - triggers JavaScript
- toggle-content/toggle-content--display class - applies CSS styles
- data-toggle_id attribute - refers to the data-toggle_target_id class from the js-toggle element. It is needed only in case that the js-toggle-content is not added to the next element to js-toggle or the parent of the next element (needed only in specific cases)

Storing toggle state in cookies

Toggle has an option to update its status into cookies, using the js-cookie library. To make it work you need to add following attributes to the element with toggle class.

data-toggle_cookie_name - representing a group of toggle keys. It's going to be used as a name of the cookie, which will contain data in a JSON format and can therefore group several toggle cookey keys
data-toggle_cookie_key - key specifying that particular toggle element

Default open state

If you want to use a toggle that will open by default, just add the following to the classes:

Add is-open class to the element with the toggle class

Add is-open and toggle-content--default-open classes to the element with the toggle-content class

Toggle dropdown - Structure

Dropdowns support keyboard input. Currently arrow down, up, enter and arrow right (for sub-dropdowns) and escape (for closing the dropdown).

Dropdowns work differently at large screens (absolute positioning) and mobile (accordeon). On large screen the dropdown gets closed on click outside of the content and on hover out of the content with some delay. When the dropdown content contains list, then click on it also triggers closing the dropdown, which can be prevented by adding js-dropdown--noclose-onclick class to the list item or any of its parents.

Opening to the bottom (with arrow-caret)

<div class="dropdown js-dropdown">
  <div class="js-toggle toggle icon-after arrow-caret">
    Dropdown toggle
  </div>
  <ul class="js-toggle-content toggle-content">
    <li><span>Option 1</span></li>
    <li><span>Option 2</span></li>
  </ul>
</div>

Opening to the right

  <div class="dropdown js-dropdown dropdown--right">
    <div class="js-toggle toggle icon-after arrow-caret--right">Dropdown toggle</div>
    <ul class="js-toggle-content toggle-content">
      <li><span>Option 1</span></li>
      <li><span>Option 2</span></li>
    </ul>
  </div>

Opening to the right with sub-dropdown and example of js-dropdown--noclose-onclick function

<div class="dropdown js-dropdown dropdown--right">
<div class="js-toggle toggle icon-after arrow-caret--right">Dropdown toggle</div>
  <ul class="js-toggle-content toggle-content">
    <li><span>Option 1</span></li>
    <li><span>Option 2</span></li>
    <li><span>Option 3</span></li>
    <li><span>Option 4</span></li>
    <li class="dropdown js-dropdown dropdown--right js-dropdown--noclose-onclick">
      <div class="js-toggle toggle icon-after arrow-caret--right">Other options</div>
      <ul class="js-toggle-content toggle-content">
        <li><span>Option 5</span></li>
        <li><span>Option 6</span></li>
      </ul>
    </li>
  </ul>
</div>

Combination of dropdown, multilevel-search and limited height

<div class="dropdown js-dropdown">
  <div class="js-toggle toggle icon-after arrow-caret">Dropdown toggle</div>
  <div class="js-toggle-content toggle-content arrow-caret icon-after">
    <div class="js-multilevel-select">
      <input type="text" placeholder="Search...">
    </div>
    <ul class="js-multilevel-select-list multilevel-select-list--mh200">
      <li><span>Option 1</span></li>
      <li><span>Option 2</span></li>
      <li><span>Option 3</span></li>
      <li><span>Option 4</span></li>
      <li><span>Option 5</span></li>
      <li><span>Option 6</span></li>
      <li><span>Option 7</span></li>
      <li><span>Option 8</span></li>
      <li><span>Option 9</span></li>
      <li><span>Option 10</span></li>
    </ul>
  </div>
</div>

Toggle accordion - Structure

  <h3 class="js-toggle toggle">Toggle</h3>
  <div class="js-toggle-content toggle-content">Toggle Content.</div>

Toggle accordion - Example (with arrow-caret)

Accordion toggle

JS Toggle Content

  <div class="js-toggle toggle icon-after arrow-caret">Accordion toggle</div>
  <div class="js-toggle-content toggle-content">
    <div>JS Toggle Content</div>
  </div>

Toggle accordion - checkbox

Checkbox toggle

JS Toggle Content

  <label class="toggle js-toggle checkbox-before">Checkbox toggle</label>
  <div class="js-toggle-content toggle-content">
    <div>JS Toggle Checkbox</div>
  </div>

Toggle accordion without animation - Example

Can be achieved by replacing toggle-content with the toggle-content--display class.

No animation toggle

JS Toggle Content

  <div class="js-toggle toggle icon-after arrow-caret">No animation toggle</div>
  <div class="toggle-content--display js-toggle-content">
    <div>JS Toggle Content</div>
  </div>