HTML CSS
(a quick guide)
<div class="tab"> <input id="tab-1" type="checkbox"> <label for="tab-1">FIRST</label> <div class="content">CONTENT</div> </div>
<div class="tab"> <input id="tab-2" type="checkbox"> <label for="tab-2">SECOND</label> <div class="content">CONTENT</div> </div>
HIDE CHECKBOX .tab input { display: none; }
HIDE CONTENT BY DEFAULT .content { overflow: hidden; max-height: 0; transition: max-height 0.3s; }
SHOW CONTENT WHEN CHECKED .tab input:checked ~ .content { max-height: 100vh; }