expanded

Sample:

Code:

<nav>
  <button aria-expanded="false" aria-controls="main_nav">
    Navigation
  </button> 

  <ul id="main_nav">
    <li>
      <a href="#">Link 1</a>
    </li>
    <li>
      <a href="#">Link 2</a>
    </li>
  </ul>
</nav>

<style>
   [aria-expanded="false"] + ul {
    display: none;
  }
</style>

<script>
  const button = document.querySelector('button')

  button.addEventListener('click', e => {
    const isExpanded = button.getAttribute('aria-expanded') === "true"
    button.setAttribute('aria-expanded', !isExpanded)
  })
</script>