HTML
<input type="checkbox" class="trigger"/> Buka/Tutup Spoiler <div class="spoiler"> Konten di sini... </div>
CSS
input.trigger { display:inline-block; margin:0; padding:0; } .spoiler { background-color:white; padding:15px 30px; margin:10px 0 0; display:none; } input.trigger:checked + .spoiler, input.trigger:checked + br + .spoiler { display:block; }
Dengan CSS3 Transisi
input.trigger { display:inline-block; margin:0; padding:0; } .spoiler { overflow:hidden; background-color:white; margin:10px 0 0; padding:0 30px; height:0; visibility:hidden; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transition:all 1s ease-in-out; } input.trigger:checked + .spoiler, input.trigger:checked + br + .spoiler { padding:15px 30px; visibility:visible; height:300px; overflow:auto; }
Sumber https://www.dte.web.id/