Amazing Elementor Show Hide Section Button

No extra plug-ins required! Elementor Free Compatible.

This is how you can very easily create an Elementor section that is not visible by default, but that will show or hide itself 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 (click the icon to show the code).

Amazing Elementor Show Hide Section Button

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.showme').click(function(){
$(this).closest('.elementor-section').next().slideToggle();
$(this).toggleClass('opened');
});
});
});
</script>
<style>

.showme > div > div > a , .showme > div > div > div > i , .showme > div > div > img{
cursor: pointer;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.opened > div > div > div > i , .opened > div > div > img{
transform: rotate(90deg);
}

</style>

Amazing Elementor Show Hide Section Button

Then, create the icon in the section above the Elementor section you want to show / hide on click (behave as an accordion)

You can also use a button or image element.

Give that element the class 'showme'.

Finally, hide that section for all viewports (if you want it hidden by default)

Amazing Elementor Show Hide Section Button

Important: if using a button, empty the 'link' field. Otherwise it will reload the page.

It will work for as many sections you want like this on your page!

Also keep in mind that the icon or button will only show / hide the Elementor section right below it!

It also works with inner sections, allowing for these possibilities.

 
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.
 
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.
 
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.
 
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.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Et voila! Thanks for reading!
Let me know if you need help!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

Addons Resources
Addons
Resources
Addons
Finder Tool
Addons
Discount Codes
Addons
Review
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Element Or Codes>