משתמש: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;

} /* Style the buttons that are used to open and close the accordion panel */ button.accordion {

   background-color: #eee;
   color: #444;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   text-align: left;
   border: none;
   outline: none;
   transition: 0.4s;

}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ button.accordion.active, button.accordion:hover {

   background-color: #ddd;

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