HTML5 aria-expanded toggle
The button below can be clicked and the related content will made visible.
<dl class="expandable">
<dt><button role="button" aria-expanded="false">Click me</button></dt>
<dd hidden>Expanded content</dd>
</dl>
<script>
;(function () {
var expandables = document.querySelectorAll('.expandable [aria-expanded]')
for(i = 0; i < expandables.length ; i++) {
expandables[i].addEventListener('click', function () {
var expanded = this.getAttribute('aria-expanded')
if (expanded === 'false') {
this.setAttribute('aria-expanded', 'true')
} else {
this.setAttribute('aria-expanded', 'false')
}
var content = this.parentNode.parentNode.querySelector('dd')
if (content) {
content.getAttribute('hidden')
if (typeof content.getAttribute('hidden') === 'string') {
content.removeAttribute('hidden')
} else {
content.setAttribute('hidden', 'hidden')
}
}
})
}
})()
</script>