WebUI mobile-first CSS

Toggle Container Classes

The following tables describe the classes available in WebUI for toggle container.

Classes

Class

Description

toggle-container

Defines a container for one or more toggle items.

toggle-item

Defines a single toggle element.

toggle-activator

Toggles the element specified by the data target attribute via a click event.

toggle-activator-dynamic

Toggles the element specified by the data target attribute via a hover event.

toggle-activator-focus

Toggles the element specified by the data target attribute via a focus event.

toggle-deactivator

Toggles the element specified by the data target attribute via a click event.

toggle-deactivator-dynamic

Toggles the element specified by the data target attribute via a hover event.

toggle-deactivator-focus

Toggles the element specified by the data target attribute via a focus event.

toggle-inclusive

When present on the toggle-container, toggle items will show without sibling toggle items being hidden.

Data Attributes

Attribute

Description

data-target

Specifies an element that will be toggled by a toggle activator.

data-transition-duration

The time taken in milliseconds for the toggle item to transition in and out.
An integer value. Default: 500.

data-transition-type

The transition type used to toggle a toggle item in and out.
Can be "fade" or "collapse". Default: slide.

data-transition-orientation

The transition orientation used to toggle a toggle item in and out.
Can be "vertical" or "horizontal". Default: horizontal.

data-transition-distance

The transition distance used to toggle a toggle item in and out.
Can be rem, px, or % units. Default: Content width.

data-close-external

Specifies the id of the toggle item that will be toggled out by clicking anywhere outside the toggle item.
Default: Not enabled.

Toggle Container

The toggle container is a generic component used to manage the showing and hiding of elements, but it is a bit more than that. It combines functionality found in menus and tabs, but adds various behaviours such as inclusive and exclusive behaviour, off-canvas shifting, and transitions. The result is a component that allows you to invent new ways to present web content.

Although it is a trivial task to setup off-canvas panels, accordions, and tabs, etc., it is important to know the patterns to use for each type of component you want. Here are some patterns to implement various common components.

Basic Toggle

One very simple use for the toggle container is to toggle visibility of an element without writing any JavaScript. By using the toggle container you can also specify a transition type and duration. If the transition type and duration is omitted the toggle item will show or hide immediately.

Example

Markup

<div class="toggle-container" data-transition-duration="1000" data-transition-type="fade">	
  <div class="table-row height-control-xl text-bold text-sm">
    <div class="table-col">
      <button type="button" data-target="#toggleItemBasic1" class="toggle-activator button-sm button-accent-1">Toggle Element</button>       
    </div>
    <div class="table-col">
      <div class="toggle-item height-control-sm width-md-lg background-accent-2 hidden" id="toggleItemBasic1"></div>
    </div>
  </div>  
</div>

Using toggle-activator and toggle-deactivator together

Sometimes it may be useful to deactivate the element specified as the toggle item via an event on the toggle item itself. This can be achieved by using the toggle-deactivator class on the toggle item. There are many other possible configurations that could make use of this combination.

A toggle item can also be a toggle activator or deactivator if required, as in the following example.

Example

Markup

<div class="toggle-container" data-transition-duration="1000" data-transition-type="fade">	
  <div class="table-row height-control-xl text-bold text-sm">
    <div class="table-col">
      <button type="button" data-target="#toggleItemBasic1" class="toggle-activator button-sm button-accent-1">Toggle Element</button>       
    </div>
    <div class="table-col">
      <div class="toggle-item toggle-deactivator container height-control-sm width-md-lg accent-2 hidden" data-target="#toggleItemBasic1" id="toggleItemBasic1">
        <span class="place-middle-center">Deactivator</span>
      </div>
    </div>
  </div>  
</div>

Off-canvas drawer

Example

Off-Canvas Drawer Panel

Markup

<div class="toggle-container" data-transition-duration="1000" data-close-external="#offCanvasRight">	
  <div id="offCanvasRight" class="toggle-item off-canvas-right dock-top-right accent-1-dark width-lg-xl height-full layer-top">		
    <h2 class="place-middle-center">Off-Canvas Drawer Panel</h2>
  </div>
  <div class="form-row text-bold text-sm">
    <div class="form-col-20 background-accent-1-light">
      <button type="button" data-target="#offCanvasRight" class="toggle-activator button-sm button-accent-1">Toggle Off-canvas</button>
    </div>
  </div>  
</div>

Inline Drawer

Example

Lorem ipsum dolor sit amet, mei decore nonumy tamquam ad, cu alienum adipiscing per. Cum tamquam albucius ex, his ad prima nostrum menandri. An usu facilisis neglegentur, ius amet perfecto definiebas an. Eu legere sanctus interesset qui, ridens impedit persecuti sit eu, vidit diceret nam eu.

Markup

<div class="toggle-container" data-transition-duration="1000" data-close-external="#inlineDrawer">
  <div class="area height-xl width-full">
    <p>Lorem ipsum dolor sit amet, mei decore nonumy tamquam ad, cu alienum adipiscing per. Cum tamquam albucius ex, his ad prima
    nostrum menandri. An usu facilisis neglegentur, ius amet perfecto definiebas an. Eu legere sanctus interesset
    qui, ridens impedit persecuti sit eu, vidit diceret nam eu.</p>

    <div class="toggle-item off-canvas-left place-top-left accent-1 width-lg-xl height-full" id="inlineDrawer">
      <div class="area">
        <p>Lorem ipsum dolor sit amet, mei decore nonumy tamquam ad, cu alienum adipiscing per. Cum tamquam albucius ex, his ad prima
          nostrum menandri. An usu facilisis neglegentur, ius amet perfecto definiebas an.</p>
      </div>
    </div>
  </div>
  <div class="form-row text-bold text-sm">
    <div class="form-col-20 background-accent-1-light">
      <button type="button" data-target="#inlineDrawer" class="toggle-activator button-sm button-accent-1">Toggle Inline Drawer</button>
    </div>
  </div>  
</div>

Accordion

Example

Panel 2 content

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Markup

<div class="toggle-container" data-transition-duration="1000" data-transition-type="collapse">
  <div class="content-col-20">
    <button data-target="#panel1" class="toggle-activator menu-button menu-button-accent-1 transition-long">Heading 1 (Tap to open)</button>
    <div id="panel1" class="toggle-item hidden">
      <div class="panel border-sm border-accent-1 width-full">
        Panel 1 content
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div>
      <div class="row-spacing-xs"></div>
    </div>
    <div class="row-spacing-xs"></div>     
    <button data-target="#panel2" class="toggle-activator menu-button menu-button-accent-1 transition-long">Heading 2 (Tap to open)</button>
    <div id="panel2" class="toggle-item">
      <div class="panel border-sm border-accent-1 width-full">
        Panel 2 content
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div>
      <div class="row-spacing-xs"></div>
    </div>
    <div class="row-spacing-xs"></div>
    <button data-target="#panel3" class="toggle-activator menu-button menu-button-accent-1 transition-long">Heading 3 (Tap to open)</button>
    <div id="panel3" class="toggle-item hidden">
      <div class="panel border-sm border-accent-1 width-full">
        Panel 3 content
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </div>
      <div class="row-spacing-xs"></div>
    </div>
  </div>
</div>

Notice that in order to make any accordion panels open by default you just omit the hidden class from the toggle item element.

See the DEMO-Accordions-Menus-Tabs.html demo page with the install or download package, for more examples using the toggle container.

Events

There are 4 event callbacks that can be used, ui.toggle.show.before, ui.toggle.show.after, ui.toggle.hide.before, and ui.toggle.hide.after. The following script shows how to setup the event callbacks.

Script

webui.ready(function() {
  
  ui( "#panel1" ).on("ui.toggleItem.show.before", function(e) {
    // Take some action
  });

  ui( "#panel1" ).on("ui.toggleItem.show.after", function(e) {
    // Take some action
  });

  ui( "#panel1" ).on("ui.toggleItem.hide.before", function(e) {
    // Take some action
  });

  ui( "#panel1" ).on("ui.toggleItem.hide.after", function(e) {
    // Take some action
  });

});