(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.)
Support by getting –
1 – Elementor Pro
Clickable Horizontal/Vertical Accordion with Elementor & CSS/JS
- Give each accordion/column containers class “column“.
- Inside the column containers, give the class “inner-element” to the elements that needs to be hidden/shown. Make sure this elements have position: absolute, else the column containers would stretch to fit the content.
- The code works by adding expanded class to the column container that was clicked, making it use the CSS values given in CSS styles.
- Simply add your desired effect in .expanded CSS styling. Make sure to do it for both desktop and tablet/mobile, as in tablet/mobile we use height property instead of width.
- The inner-element is made visible/hidden by adding active class when the right column is clicked. Change the styling in .active class for your desired effect.
- If you wish to have any column Active by default. You can simply add the class “expanded” to column and also “active” to the inner-elements. So, the class for column would look like “column expanded” and for inside content, “inner-element active”.
- For Vertical Accordion, just remove the CSS code with media queries. Currently, we have different media queries added, so that on desktop it uses horizontal accordion and on tablet/mobile it uses vertical accordion. Simply, remove the code for desktop media query and also remove just the media query for tabet/mobile.
Coastal Cave
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Coastal Cave
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Coastal Cave
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Coastal Cave
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.