Toggle Container
The toggle container is a generic component primarily used to manage element visibility, but includes a lot more than that. It combines functionality found in menus and tabs, but adds various behaviours such as inclusive and exclusive menu dropdown modes, 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 which patterns to use for each type of component. 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.
<div class="toggle-container" data-transition-duration="1000" data-transition-type="fade">
<div class="row text-bold text-sm">
<div class="col">
<button type="button" data-target="#toggleItemBasic1" class="toggle-activator button-sm button-info">Toggle Element</button>
</div>
<div class="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 be a toggle activator or deactivator. In the following example, the toggle item targets itself as the deactivator.
<div class="toggle-container" data-transition-duration="1000" data-transition-type="fade">
<div class="row text-bold text-sm">
<div class="col">
<button type="button" data-target="#toggleItemBasic1" class="toggle-activator button-sm button-info">Toggle Element</button>
</div>
<div class="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>
Classes
Classes available in WebUI for toggle container.
| Class | Description |
|---|---|
| toggle-container | Defines a container for one or more toggle items. |
| toggle-item | Defines a single toggle element. |
| toggle-item-content | Defines an toggle item area where form controls will be hidden when a toggle item is hidden or moved off screen. |
| toggle-activator | Toggles the element specified by the data target attribute via a click event. |
| toggle-activator-hover | 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-hover | 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. |
| off-canvas-left | Adds left off-canvas functionality to a toggle item. |
| off-canvas-right | Adds right off-canvas functionality to a toggle item. |
| off-canvas-body | Causes an element to shift in tandem with an off-canvas toggle item. This would normally be a page content area, but could be any element. |
| off-canvas-drawer | Required for off-canvas toggle items that are separate from off-canvas body functionality and when the off-canvas-body class is present. |
Data Attributes
Data attributes available in WebUI for toggle container.
| 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 "slide", "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 | A valid CSS selector for the toggle item(s) that will be hidden by clicking anywhere outside the specified toggle item(s). Default: Not enabled. |
| data-allow-escape-key | Allows the escape key to be used to dismiss a toggled element. Can be "true" or "false". Default: false. |
| data-focus-element | Specifies a control to receive focus when a toggle item is shown or moved into view. The id of an element, e.g. #myElem |
| data-focus-return-element | Specifies a control to receive focus when a toggle item is hidden or moved out of view. The id of an element, e.g. #myElem |
Off-Canvas
Off-canvas drawer
Off-Canvas Drawer Panel
<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="row text-bold text-sm">
<div class="col">
<button type="button" data-target="#offCanvasRight" class="toggle-activator button-sm button-info">Toggle Off-canvas</button>
</div>
</div>
</div>
Inline Drawer
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.
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.
<div class="toggle-container" data-transition-duration="1000"
data-close-external="#inlineDrawer">
<div class="container overflow-hidden height-xl pad-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-2-dark width-lg-xl height-full" id="inlineDrawer">
<div class="pad-xl">
<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="row-spacing-md"></div>
<div class="row text-bold text-sm">
<div class="col">
<button type="button" data-target="#inlineDrawer" class="toggle-activator button-sm button-info">Toggle Inline Drawer</button>
</div>
</div>
</div>
Inline Drawer with modal and focus trap
<div class="toggle-container" data-transition-duration="500"
data-close-external="#inlineDrawerWithModal" data-focus-element="#offCanvasTextbox1"
data-focus-return-element="#ocReturnTextbox">
<div class="container overflow-hidden height-xl width-full background-translucent-1 border-xs">
<div class="height-full">
<div class="place-middle-center gap-vertical-md">
<input type="text" class="input-sm" id="ocReturnTextbox" /><br />
<input type="text" class="input-sm" /><br />
<input type="text" class="input-sm" />
</div>
</div>
<div id="inlineDrawerWithModal" class="toggle-item off-canvas-left place-top-left dark-alternate width-lg-xl height-full layer-top">
<div class="place-top-right top-xs text-xl text-bold">
<a href="javascript:void(0)" class="toggle-activator button-link dark-alternate rounded-right-sm shadow-md pad-sm fixed" data-target="#inlineDrawerWithModal">⋮</a>
</div>
<div class="toggle-item-content place-middle-center gap-vertical-md pad-sm">
<input type="text" class="input-sm" id="offCanvasTextbox1" /><br />
<input type="text" class="input-sm" /><br />
<input type="text" class="input-sm" id="offCanvasTextbox3" />
</div>
</div>
</div>
</div>
<div id="offCanvasModalPanel" class="modal"></div>
webui.ready( () => {
var offCanvasModal = ui("#offCanvasModalPanel").modalControl({
transitionDuration: 300
});
ui( "#inlineDrawerWithModal" ).on("ui.toggleItem.show.before", (e) => {
offCanvasModal.open();
});
ui( "#inlineDrawerWithModal" ).on("ui.toggleItem.hide.after", (e) => {
offCanvasModal.close();
});
var offCanvasFocusTrap = ui("#inlineDrawerWithModal").focusTrapControl({
firstFocusElement: "#offCanvasTextbox1",
lastFocusElement: "#offCanvasTextbox3"
});
//ui("#ocReturnTextbox").setFocus();
});
Accordion
Accordion Example
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<div class="toggle-container" data-transition-duration="500" data-transition-type="collapse">
<div class="content-col-20">
<button data-target="#panel1" class="toggle-activator menu-button menu-button-info transition-long">Heading 1 (Tap to open)</button>
<div id="panel1" class="toggle-item hidden">
<div class="border-xs border-accent-1 width-full pad-lg">
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-info transition-long">Heading 2 (Tap to open)</button>
<div id="panel2" class="toggle-item">
<div class="border-xs border-accent-1 width-full pad-lg">
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-info transition-long">Heading 3 (Tap to open)</button>
<div id="panel3" class="toggle-item hidden">
<div class="border-xs border-accent-1 width-full pad-lg">
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 panel open by default you just omit the hidden class from the toggle item element.
See the DEMO-Navigation and content selection demo page with the GitHub download package, for more examples using the toggle container.
Events
Toggle Container Event Callbacks
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.
webui.ready( () => {
ui( "#panel1" ).on("ui.toggleItem.show.before", (e) => {
// Take some action
});
ui( "#panel1" ).on("ui.toggleItem.show.after", (e) => {
// Take some action
});
ui( "#panel1" ).on("ui.toggleItem.hide.before", (e) => {
// Take some action
});
ui( "#panel1" ).on("ui.toggleItem.hide.after", (e) => {
// Take some action
});
});