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

How to create an amazing accordion like section

<script>
jQuery(document).ready(function($){
$('.showme').click(function(){
$(this).parents('.elementor-section').next().slideToggle();
$(this).toggleClass('opened');
});
});
</script>
<style>
.opened{
transform: rotate(90deg);
}
.showme{
cursor: pointer;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
</style>

How to create an amazing accordion like section

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)

How to create an amazing accordion like section

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.

.opened{
transform: rotate(90deg);
}

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!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

Your email address will not be published. Required fields are marked *