I've built a couple of variations on the generic "toggle" theme that listen for click events on a button and toggle the visibility (or possibly other attribute) of its targets (according to aria-controls). It's a really simple and useful interface element that's entirely declarative and easy to test. The markup looks something like:
<button is="aria-toggle" aria-controls="section1">
Toggle section 1
</button>
<section id="section1">
Content to be hidden
</section>
<button is="aria-toggle" aria-controls="section2" aria-pressed="true">
Toggle section 2
</button>
<section id="section2" aria-hidden="true">
Content to be shown
</section>
Here's the one that I built for EITI. One improvement that I would like to make is that the attribute that the button toggles on its target(s) could be configured (e.g. aria-toggles="aria-expanded") or inferred based on the presence of the aria-pressed or aria-expanded attributes on the button.
I've built a couple of variations on the generic "toggle" theme that listen for
clickevents on a button and toggle the visibility (or possibly other attribute) of its targets (according toaria-controls). It's a really simple and useful interface element that's entirely declarative and easy to test. The markup looks something like:Here's the one that I built for EITI. One improvement that I would like to make is that the attribute that the button toggles on its target(s) could be configured (e.g.
aria-toggles="aria-expanded") or inferred based on the presence of thearia-pressedoraria-expandedattributes on the button.