Search Knowledge Base Articles

Wordpress - Accordion CSS & JS

//CSS

.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

.active, .accordion:hover {
background-color: #ccc;
}

.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}



//JS
function openAccordion(i)
{
var panel = document.getElementById('panel-'+i);
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}

function openNextAccordion(i)
{
var panel = document.getElementById('panel-'+i);
panel.style.display = "none";
var panel_new = document.getElementById('panel-'+(i+1));
panel_new.style.display = "block";
}

Did you find this article useful?

Related Articles