HTML5 aria-expanded toggle

The button below can be clicked and the related content will made visible.

Click me

<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>