table collapse responsive

RUANG POSTING HTML

<div class="header-collapse" onclick="toggleCollapse('collapse1')"> <h3>Pilihan 1</h3> </div> <div class="collapse-body" id="collapse1"> <!--Isi konten disini--> </div> <div class="header-collapse" onclick="toggleCollapse('collapse2')"> <h3>Pilihan 2</h3> </div> <div class="collapse-body" id="collapse2"> <!--Isi konten disini--> </div> <div class="header-collapse" onclick="toggleCollapse('collapse3')"> <h3>Pilihan 3</h3> </div> <div class="collapse-body" id="collapse3"> <!--Isi konten disini--> </div>

DI ATAS /HEAD

<script> function toggleCollapse(id) { var element = document.getElementById(id); if (element.style.maxHeight === "0px" || element.style.maxHeight === "") { element.style.maxHeight = element.scrollHeight + "px"; } else { element.style.maxHeight = "0px"; } } </script>

DIATAS B;SKIN

.header-collapse { background-color: #f2f2f2; cursor: pointer; margin-bottom:5px; position: relative; overflow: hidden; border-radius:20px; } .header-collapse h3 { margin: 0 0 0 10px!important; padding:10px 20px 10px 10px!important; font-size:14px!important; } .collapse-body { max-height: 0; overflow: hidden; padding: 0 10px; transition: max-height 0.3s ease-out; }

DEMO