collapse responsive

di ruang posting

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

</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>

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