JSFiddle - React, Tailwind, and code Playground

HTML

<button type='button' onclik="selctCheckBox()">button</button>
<label for="btnx"><input type="checkbox" name="" id="btnx"></label>

<nav>
  <ul>
    <li>item 01</li>
    <li>item 02</li>
    <li>item 03</li>
  </ul>
</nav>
<br><br>
<label for="btny">label</label>
<input type="checkbox" name="" id="btny">
<nav>
  <ul>
    <li>item 04</li>
    <li>item 05</li>
    <li>item 06</li>
  </ul>
</nav>

CSS

li{
  display: inline-block;
  background-color: red;
}
nav {
  display: none;
}

[type="checkbox"]:checked + nav {
  display: block;
}
label {
  cursor:pointer;
}

JavaScript

function selctCheckBox(){
	var btn = document.getElementById('btnx');
  btn.checked = true;
}