HTML CSS

SIMPLE ACCORDION WITH PURE HTML CSS

<div class="tab"> <input id="tab-1" type="checkbox">   <label for="tab-1">FIRST</label>   <div class="content">CONTENT</div> </div>

THE HTML

01

<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; }

THE CSS

02

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;  }