<body class="no-js">
  <div class="lang-menu">
  <button class="lang-menu__button" id="lang-menu-open">Open</button>
  <ul class="lang-menu__items">
    <li><a href="/english">English</a></li>
    <li><a href="/spanish">Español</a></li>
    <li><a href="/french">Français</a></li>
    <li><a href="/arabic">عربى</a></li>
    <li><a href="/portuguese">Português</a></li>
  </ul>
  </div>
</body>
.no-js {
  .lang-menu__button {
    display: none;
  }
}

.lang-menu__items {
  display: block;
  
  &.closed {
    display: none;
  }
}
View Compiled 
document.body.classList.remove('no-js')
const langButton = document.getElementById('lang-menu-open')
langButton.setAttribute('aria-haspopup', true)
langButton.setAttribute('aria-expanded', false)

const langMenu = document.querySelector('.lang-menu__items')

langMenu.classList.add('closed')

langButton.addEventListener('click', () => {
  if (langButton.getAttribute('aria-expanded') == 'false') {
    langButton.setAttribute('aria-expanded', true)  
  } else {
    langButton.setAttribute('aria-expanded', false)
  }
    
  langMenu.classList.toggle('closed')
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.