משתמש:Men770/דף משתמש עתידי: הבדלים בין גרסאות בדף
קפיצה לניווט
קפיצה לחיפוש
אין תקציר עריכה |
אין תקציר עריכה |
||
| שורה 22: | שורה 22: | ||
transition: max-height 0.2s ease-out; | transition: max-height 0.2s ease-out; | ||
} | } | ||
/* | /* Style the buttons that are used to open and close the accordion panel */ | ||
. | button.accordion { | ||
padding: | 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> | </style> | ||
גרסה מ־09:16, 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 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>
<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>