JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer-menu" class="expanded">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
  </ul>
</div>

<button onclick="js:remove_class()"></button>
<button onclick="js:add_class()"></button>

CSS

#outer-menu::after {
    content: 'class-attr: ' attr(class) '';
}

button::after {
  content: attr(onclick)
}

#outer-menu ul {
  display: none;
} 

#outer-menu.expanded ul {
  display: block;
}

JavaScript

remove_class = () => {
  let el = document.querySelector("#outer-menu.expanded")
  el.classList.remove("expanded")
}

add_class = () => {
  let el = document.querySelector("#outer-menu:not(.expanded)")
  el.classList.add("expanded")
}