Toggle
Easily add toggle behaviour to any button using data-toggle attribute.
aria-controls and aria-expanded attributes are added automatically for better accessibility.
The data-toggle-visible content is used when content is made visible. For more complex content (eg: svg icons), this
can be set in a template element.
You can do also the opposite, and hide content on click. data-toggle-hidden is used when content is hidden.
Accordion
It turns out modern html is just fine for most accordion thanks to the details tag
Item 1
Ex fugiat excepteur nostrud aliqua quis nostrud. Dolore sint commodo aute nulla adipisicing ea dolor. Nulla anim do sit enim amet tempor laboris. Quis sint consectetur est tempor excepteur enim reprehenderit. Aliquip proident mollit laboris anim eu do cupidatat culpa in. Mollit ut dolor minim est nostrud ad enim deserunt eu culpa ad commodo fugiat.
Item 2
Et occaecat ad sit amet laboris ipsum qui non et. Esse proident tempor in officia velit proident ut aliquip cupidatat. Fugiat voluptate in esse nisi enim eiusmod ipsum excepteur est velit enim excepteur id. Tempor nostrud fugiat laborum tempor adipisicing ipsum pariatur aliquip et eiusmod deserunt. Non voluptate mollit consequat nisi magna laborum in Lorem. Duis sunt labore non consequat non ex culpa enim reprehenderit nulla cillum aute.
Also check out demo with bootstrap styles.
Tabs
Add tab like nav with `data-toggle-group` and styling can be done through the aria attributes.
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.