Share

Follow

Copied
Press Ctrl+C or equivalent to copy
Preview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at commodo magna, id sollicitudin ligula. Fusce eget massa cursus, consequat justo non, egestas eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at commodo magna, id sollicitudin ligula. Fusce eget massa cursus, consequat justo non, egestas eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at commodo magna, id sollicitudin ligula. Fusce eget massa cursus, consequat justo non, egestas eros.
Accordion Cutomizer
Preview Background Color
Title Background Color
Title Background Hover Color
Title Background Active Color
Title Text Color
Title Text Hover Color
Title Text Active Color
Content Background Color
Content Text Color
Space Between Title And Content
2px
Margin
4px
Active Margin
4px
Border/Corner Radius
4px
Code
CSS
button.accordion {
background-color: transparent;
color: #fff;
border-radius: 4px;

cursor: pointer;
padding: 8px;
width: 100%;
margin: 4px 0;

text-align: left;
border: none;
outline: none;
transition: 0.3s;
}

button.accordion:hover {
background-color: rgba(255,255,255,0.3);
color: ;

}

button.accordion.active {
background-color: #ffffff;
color: #000000;
border-radius: 4px 4px 0 0;

margin: 4px 0 0 0;

}

div.panel {
background-color: rgba(255,255,255,0.8);
color: #000;
border-radius: 0 0 4px 4px;

margin: 0;
padding:0 8px;
max-height: 0;
overflow: hidden;
transition: 0.3s;
opacity: 0;
}

div.panel.show {
margin: 2px 0 8px;

padding: 8px;
opacity: 1;
max-height: 500px;
}
HTML
<button class="accordion">
Title
</button>
<div class="panel">
...content...
</div>
JS
var accordions = document.querySelectorAll("button.accordion");
for (var i = 0; i < accordions.length; i++) {
accordions[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}