HTML CSS

SIMPLE PURE HTML CSS ACCORDION

(a quick guide)

<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 & CONTENT .tab input, .tab .content { display: none; }

THE CSS

02

SHOW CONTENT WHEN CHECKED .tab input:checked ~ .content   { display: block; }

RESPONSIVE AUTOFIT .tab label, .tab .content   { display: block; width :100%; }