Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
index.js
readme.js
readme.styl
test.html
test.js

README.md

Accordion

The Accordion component creates a set of interactive headings that hide and show content sections, with Keyboard Support

Demo

Example
Whatever Some Content The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.

Add the multiple property to the tonic-accordion component to allow multiple sections to be expanded at one time.

Example
Whatever Some Content The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.

Code

HTML

  <tonic-accordion>
    <tonic-accordion-section
      name="bucket-test-1"
      id="bucket-test-1"
      data="preview"
      label="Accordion Test 1">
      Whatever
    </tonic-accordion-section>
    <tonic-accordion-section
      name="bucket-test-2"
      id="bucket-test-2"
      label="Accordion Test 2">
      Some Content
    </tonic-accordion-section>
    <tonic-accordion-section
      name="bucket-test-3"
      id="bucket-test-3"
      label="Accordion Test 3">
      The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.
    </tonic-accordion-section>
  </tonic-accordion>

Api

Properties

for TonicAccordion

Property Type Description Default
multiple number Allow multiple sections to be expanded at one time. 0
theme string Adds a theme color (light, dark or whatever is defined in your base CSS. light

for TonicAccordionSection

Property Type Description Default
id string Adds the id attribute.
name string Adds the name attribute.
label string Pass into 0

Instance Members

Property Description
click() Click event
You can’t perform that action at this time.