(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Don’t want to make from scratch? Buy the template instead 🙂
Introduction – Horizontal Accordion with CSS, JS in Elementor
In this tutorial, we will create a horizontal accordion that opens on click. It is fully responsive and turns into vertical accordion in table and mobile devices. H
Code for Horizontal Accordion
- dm-column-title is the CSS class of the title in the Accordion. collapsed is the second CSS class given to the titles that are present in closed accordion.
- dm-column-tab is the CSS class of each accordion columns container. active is the second CSS class given to only the opened accordion.
- dm-column-inner-tab is the CSS class given to the inner contents container in each accordion. active is the second CSS class given only to the opened accordion’s inner container.
<style>
@media(min-width:1025px) {
.dm-column-title {
white-space: nowrap;
writing-mode: sideways-lr;
width: 15%;
align-content: center;
transition: width 0s;
}
.dm-column-title.collapsed {
transition: width 0s;
width: 100%;
}
.dm-column-tab {
width: 10%;
transition: width 0.5s;
}
.dm-column-tab.active {
width: 70%;
}
}
.dm-column-inner-tab {
display: none;
opacity: 0;
}
.dm-column-inner-tab.active {
opacity: 0;
animation: dm-fade-in 0.5s linear forwards;
}
/*Reveal Inner container animation*/
@keyframes dm-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*Tablet Settings*/
@media(max-width:1024px) {
.dm-column-tab {
height: 100px;
transition: height 0.5s;
}
.dm-column-tab.active {
height: 500px;
}
}
</style>
<script>
const dmColumnTabs = document.querySelectorAll('.dm-column-tab');
const dmColumnTabsInner = document.querySelectorAll('.dm-column-inner-tab');
const dmColumnTitles = document.querySelectorAll('.dm-column-title');
// Set default active tab (first one)
if (dmColumnTabs.length > 0 && dmColumnTabsInner.length > 0 && dmColumnTitles.length > 0) {
dmColumnTabs[0].classList.add('active');
dmColumnTabsInner[0].style.display = 'flex';
dmColumnTabsInner[0].classList.add('active');
dmColumnTitles[0].classList.remove('collapsed');
}
dmColumnTabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
// If tab is already active, do nothing
if (tab.classList.contains('active')) return;
// Reset all tabs
dmColumnTabs.forEach((t) => t.classList.remove('active'));
dmColumnTabsInner.forEach((inner) => {
inner.classList.remove('active');
inner.style.display = 'none';
});
dmColumnTitles.forEach((title) => title.classList.add('collapsed'));
// Set active tab
tab.classList.add('active');
dmColumnTabsInner[index].style.display = 'flex';
setTimeout(() => {
dmColumnTabsInner[index].classList.add('active');
}, 500);
dmColumnTitles[index].classList.remove('collapsed');
});
});
</script>
