Accordion static files
/** Accordion styles **/ | |
.accordions { | |
background: white; | |
padding: 16px 8px; | |
} | |
.accordion { | |
background-color: white; | |
color: #444; | |
cursor: pointer; | |
padding: 18px; | |
width: 100%; | |
border: none; | |
text-align: left; | |
outline: none; | |
font-size: 15px; | |
transition: 0.4s; | |
} | |
.accordion.active, .accordion.accordion:hover { | |
background-color: #eee; | |
} | |
.accordion-icon{ | |
color: #777; | |
float: right; | |
margin-left: 5px; | |
opacity: 0.6; | |
font-size: 12px; | |
border-radius: 20px; | |
border: 2px solid #bbb; | |
padding: 4px; | |
display: inline-block; | |
transition: rotate 2s ease-out; | |
} | |
.accordion.active .accordion-icon{ | |
transform: rotate(45deg); | |
} | |
.panel.accordion-panel { | |
padding: 8px 18px 4px 18px; | |
background-color: white; | |
max-height: 0; | |
overflow: hidden; | |
transition: max-height 0.2s ease-out; | |
} |
window.addEventListener("load", function(){ | |
var acc = document.getElementsByClassName("accordion"); | |
var i; | |
for (i = 0; i < acc.length; i++) { | |
acc[i].addEventListener("click", function() { | |
this.classList.toggle("active"); | |
var panel = this.nextElementSibling; | |
if (panel.style.maxHeight){ | |
panel.style.maxHeight = null; | |
} else { | |
panel.style.maxHeight = panel.scrollHeight + "px"; | |
} | |
}); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment