JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
   <div class="item">
      <input type="checkbox" name="nome" id="check1" onclick="marca(this);" />
      <label for="check1">Categoria 1</label>
      <ul>
         <li><a href="#">Tabela 1</a></li>
         <li><a href="#">Tabela 2</a></li>
      </ul>
   </div>
   <br>
   <div class="item">
      <input type="checkbox" name="nome" id="check2" onclick="marca(this);" />
      <label for="check2">Categoria 2</label>
      <ul>
         <li><a href="#">Tabela 3</a></li>
         <li><a href="#">Tabela 4 </a></li>
      </ul>
   </div>
   <br>
   <div class="item">
      <input type="checkbox" name="nome" id="check3" onclick="marca(this);" />
      <label for="check3">Categoria 3</label>
      <ul>
         <li><a href="#">Tabela 5 </a></li>
         <li><a href="#">Tabela 6 </a></li>
      </ul>
   </div>
   <br>
   <div class="item">
      <input type="checkbox" name="nome" id="check4" onclick="marca(this);" />
      <label for="check4">Categoria 4</label>
      <ul>
         <li><a href="#">Tabela 7</a></li>
         <li><a href="#">Tabela 8</a></li>
      </ul>
   </div>
</nav>

CSS

body {font-family: Trebuchet MS;margin: 0px;}
nav {width: 100%;}
p {font-size: 14px;text-align: justify;}
.item label {font-size: 14px;color: #333;height: 20px;display: block;padding: 5px;background: #b8cce4;cursor: pointer;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.item ul {margin: 0px;padding: 0px;list-style: none;overflow: hidden;max-height: 0;background: #fefefe;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.item ul li a {padding-left: 1rem;font-size: 14px;color: #333;background: #fff;text-decoration: none;}
.item label:hover,  .item ul li a:hover {text-decoration: underline;}
.item input {display: none;}
.item input:checked ~ ul {height: auto;max-height: 100%;}
.item label:before {content: "\002B";color: #444;font-weight: bold;float: left;margin-right: 5px;}
.item input:checked + label:before {content: "\2212";}

JavaScript

function marca(element) {
        $("nav input[type=checkbox][id!=" + $(element).attr("id") + "]")
            .attr("checked", false).toggleClass('item');
}