(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.Â
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>
This doesn’t work in Elementor v4, do you have an update that will fix that?
Hello, as long as you use older widgets that were made for v3. It will work. Right now v4 is too new to update it for v4.
The code will not work with new containers as they have different architecture.