Skip to main

Toggles

content/_includes/toggle.macros.njk

Tools for accessible toggling hidden/visible content with various options for interaction details.

Example:

<button {{ toggle.btn('toggle-id') }}>toggle aside</button>
<aside {{ toggle.target('toggle-id', synced=true) }}>
<p>This content can be toggled</p>
<button {{ toggle.close('toggle-id') }}>close</button>
</aside>

Todo:

These macros require JS which is not yet implemented


Controls

btn()

Attributes for the toggle-control button.

Params:

  • id {string}

    Must match the id passed to toggle.target()

  • expanded {boolean} = false

    Current toggle status

  • synced {boolean} = false

close()

Attributes for the toggle-close button.

Params:

  • id {string}

    Must match the id passed to toggle.target()

Content

target()

Attributes for the element to be toggled.

Params:

  • id {string}

    Must match the id passed to toggle.btn()

  • expanded {boolean} = false

    Current toggle status

  • auto_closing {boolean} = false
  • auto_closing_on_any_click {boolean} = false
  • auto_closing_exception {boolean} = none

See Also: