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');
});
$('.closebutton').click(function(){
$(this).closest('.elementor-section').prev().find('.showme').click();
});
});
});
</script>
<style>
.showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
cursor: pointer;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.opened i , .opened img , .opened svg{
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 (or move to the top).

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.

If you want a close button in one of the expanded section, simply give it the class 'closebutton'.

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

Get these templates if you are interested, and to support the website!