Toggle

Purpose

Create an element that toggles elements between on and off states.

Plugin Setup

Adding the .wb-toggle CSS class to any element will turn it into a toggle element. The behaviour of this toggle element is then controlled by the data-toggle attribute which takes a JavaScript object of properties:

For example, the following element will always toggle on elements with the .foo CSS class that are contained in a parent with the .bar CSS class. In addition, the elements it controls will be toggled on when the page is printed.

<button type="button" class="wb-toggle" data-toggle='{"type": "on", "selector": ".foo", "parent": ".bar", "print": "on"}'>Turn on</button>

Simple Example

This simple example shows:

• a group of buttons that control the toggle state of multiple elements, and
• a single element that controls its own toggle state (the last box).

Details Elements

The toggle plugin can be used to open/close multiple <details> elements. By adding the "print": "on" setting to the first toggle element, the plugin will also open all details elements when the page is printed.

Note: this example uses the parent configuration option to restrict the toggle of details elements to those that are contained in a specified parent element (#details-element). By doing this, the grouped toggle and accordion examples below aren't affected by the toggle.

Print States

The "print": "on" and "print": "off" settings can be used to control whether to always open/close regular <details> elements when printing:

• Always open when printing ("print": "on")

  Example content that provides more details.

• Always closed when printing ("print": "off") (not recommended)

  Example content that provides more details.

Grouped Toggle

This parameter restricts grouped toggles to only have one of the elements active at a time much like the grouped checkbox behaviour.

Accordion

The group toggle feature of the plugin can also be used to create an accordion.

Example

Setup

• Wrap all sections of the accordion in parent element with a unique CSS class or ID. <div class="accordion">
• For each accordion section:
  • Add the .wb-toggle class and data-toggle attribute to the element the user will click to open/close the section.
  • Add the .tgl-tab class to the element that shows the section's heading.
  • Wrap the content in a <div class="tgl-panel"> element.

If you're using details elements for the accordion sections, the HTML should look like the following once you're finished:

<div class="accordion">

	<!-- Accordion section 1 -->
	<details class="acc-group">
		<summary class="wb-toggle tgl-tab" data-toggle='{"parent": ".accordion", "group": ".acc-group"}'>Section 1's heading</summary>
		<div class="tgl-panel">
			<!-- Section 1's content -->
		</div>
	</details>

	<!-- Accordion section 2 -->
	<details class="acc-group">
		<summary class="wb-toggle tgl-tab" data-toggle='{"parent": ".accordion", "group": ".acc-group"}'>Section 2's heading</summary>
		<div class="tgl-panel">
			<!-- Section 2's content -->
		</div>
	</details>

</div>

Persist Toggle State

The following details element will remember its toggle state as long as this browser window (or tab) remains open.