Css Spoiler

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

Lihat Demo

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

Lihat Demo

Sumber https://www.dte.web.id/