How to create an amazing accordion like section
No extra plug-ins required! Elementor Free Compatible.
This is how you can very easily create a section that is not visible by default, but that will slide in and out of view on button or icon click.
To begin with, create an html element on the page where you would like that functionality, and add this code in it
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
Then, create the icon in the section above the section you want to behave as an accordion
Give that icon the class ' showme '
Finally, hide that section for all viewports (if you want it hidden by default)
It will work for as many sections you want like this on your page!
If you want to use this with a button instead, empty the link field of the button, and erase this CSS from the code above
Emptying the link field will avoid the page refreshing when you click the button.
Also keep in mind that the icon will only change the section right below it!
Et voila! Thanks for reading!
Let me know if you need help!
Get awesome new designs right in your inbox!
No spam, not more than one weekly email.
Support my work by buying Elementor Pro , or addons, through my links
Here is how to create a completely new menu that will only show after the user has scrolled to to a certain point!
Give some life to that boring icon! Get an awesome animated hamburger menu icon!
[View Demo] Easily make your Elementor sticky header hidden on scroll down, and show while scrolling back up the page.