משתמש:Men770/דף משתמש עתידי: הבדלים בין גרסאות בדף
קפיצה לניווט
קפיצה לחיפוש
(יצירת דף עם התוכן "<button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 2</button> <div class="panel">...") |
אין תקציר עריכה |
||
| שורה 1: | שורה 1: | ||
<button class="accordion">Section 1</button> | <html><button class="accordion">Section 1</button></html> | ||
<div class="panel"> | <div class="panel"> | ||
<p>Lorem ipsum...</p> | <p>Lorem ipsum...</p> | ||
</div> | </div> | ||
<button class="accordion">Section 2</button> | <html><button class="accordion">Section 2</button></html> | ||
<div class="panel"> | <div class="panel"> | ||
<p>Lorem ipsum...</p> | <p>Lorem ipsum...</p> | ||
</div> | </div> | ||
<button class="accordion">Section 3</button> | <html><button class="accordion">Section 3</button></html> | ||
<div class="panel"> | <div class="panel"> | ||
<p>Lorem ipsum...</p> | <p>Lorem ipsum...</p> | ||
גרסה מ־09:12, 22 באוגוסט 2017
<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>
<script> var acc = document.getElementsByClassName("accordion"); var i;
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>