JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<nav x-data="{ open: false }">
  <button x-show="open = false">---</button>
  <button x-show="open = true">XXX</button>
  <ul x-show="open = true">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</nav>

CSS

.accordion {
  
  border: 2px solid green;
  margin: 20px;
  padding: 20px;
  
}
.accordion-content {
  border: 2px solid red;
  margin: 20px;
  padding: 20px;
}