Toggles

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

• Bird Macros
• Contact Macros
• Media Embed macros
• Form Macros
• Section Macros
• OddNews Macros
• OSS Macros
• Post Macros
• Quote Macros
• sponsor.macros.njk
• Event Macros
• Toggles
• Utility Macros