Custom Horizontal/Vertical Accordion Card - CSS, JS - Elementor Tutorial 2024

Consider Subscribing and Liking to Support Me.
Important Links -
Get Template - dmmotionarts.c...
Code - dmmotionarts.c...
Codepen - codepen.io/dmm...
Elementor Pro - be.elementor.c...
Hostinger - www.hostg.xyz/...
Recommended hostings, plugins, themes and wordpress tools -
dmmotionarts.c...
Free Elementor Templates - dmmotionarts.c...
Some of the above links are affiliated links.
Thank you.

[@MyRajnesh]

This is what I was looking for Thanks a lot for the good work.

[@frajack]

Great tutorial! Everything is explained clearly 😍

[@DMmotionarts]

Glad it was helpful!

[@serenaliistro7455]

Hi Mayuresh! Thank you a lot for your tutorial and code, this is absolutely amazing! Thank you for your hard work. I have a couple questions, if don't mind answering. First of all, I want the overlay to be shown on the inactive column, while I don't want it to appear on the active one: is there a way to achieve it? Second question is: what if I want the icon to show only when the column isn't active and then fade out when the column opens? Is it possible to do it? Thank you in advance 🙏☺

[@DMmotionarts]

Try this code - (Make sure to give the icons CSS class = column-icon .column { transition: width 0.5s; overflow: hidden; height: 600px; cursor: pointer; } .column:after { content: ''; background: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 0; } .column-icon { transition: opacity 0.5s; } .expanded.column:after { content: ''; background: rgba(0,0,0,0); position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 0; } .expanded .column-icon { opacity: 0; } /*Desktop over 1024px*/ @media screen and (min-width: 1025px) { .expanded { width: 150% !important; } } /*Tablet and mobile, below 1025px*/ @media (max-width: 1024px) { .column { transition: height 0.5s; height: 100px; } .expanded { height: 500px !important; } } .inner-element { opacity: 0; transition: opacity 0s; z-index: 2; } .inner-element.active { opacity: 1; /* Ensure opacity is set to 1 for the active state */ transition: opacity 0.5s 0.4s; } const columns = document.querySelectorAll('.column'); const innerElements = document.querySelectorAll('.inner-element'); columns.forEach(click => { click.addEventListener('click', event => { // Iterate over all columns columns.forEach(column => { if (column === click) { // Set the clicked column width to 100% column.classList.add('expanded'); } else { // Shrink the width of other columns column.classList.remove('expanded'); } }); // Iterate over all inner elements innerElements.forEach(innerElement => { // Add the active class to the inner element of the clicked column if (innerElement.parentElement === click) { innerElement.classList.add('active'); } else { innerElement.classList.remove('active'); } }); }); });

[@serenaliistro7455]

@@DMmotionarts It works perfectly! Thank you again for your awesome job!