משתמש:Men770/דף משתמש עתידי

<html><button class="accordion">Section 1</button></html>

Lorem ipsum...

<html><button class="accordion">Section 2</button></html>

Lorem ipsum...

<html><button class="accordion">Section 3</button></html>

Lorem ipsum...

<html> <style> div.panel {

   padding: 0 18px;
   background-color: white;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out;

} /* Modal Header */ .modal-header {

   padding: 2px 16px;
   background-color: #5cb85c;
   color: white;

}

/* Modal Body */ .modal-body {padding: 2px 16px;}

/* Modal Footer */ .modal-footer {

   padding: 2px 16px;
   background-color: #5cb85c;
   color: white;

}

/* Modal Content */ .modal-content {

   position: relative;
   background-color: #fefefe;
   margin: auto;
   padding: 0;
   border: 1px solid #888;
   width: 80%;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
   -webkit-animation-name: animatetop;
   -webkit-animation-duration: 0.4s;
   animation-name: animatetop;
   animation-duration: 0.4s

}

/* Add Animation */ @-webkit-keyframes animatetop {

   from {top: -300px; opacity: 0} 
   to {top: 0; opacity: 1}

}

@keyframes animatetop {

   from {top: -300px; opacity: 0}
   to {top: 0; opacity: 1}

}

</style>

for (i = 0; i < acc.length; i++) {

 acc[i].onclick = function() {
   this.classList.toggle("active");
   var panel = this.nextElementSibling;
   if (panel.style.maxHeight){
     panel.style.maxHeight = null;
   } else {
     panel.style.maxHeight = panel.scrollHeight + "px";
   } 
 }

} </script> </html>