משתמש:Men770/דף משתמש עתידי: הבדלים בין גרסאות בדף
קפיצה לניווט
קפיצה לחיפוש
אין תקציר עריכה |
אין תקציר עריכה |
||
| שורה 22: | שורה 22: | ||
transition: max-height 0.2s ease-out; | 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> | </style> | ||
גרסה מ־09:14, 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;
} /* 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>
<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>