Elementor show hide section toggle

Add this script to the section

<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>

Creat an icon, imge, button above the section and give class name – showme – ( icon link must be empty ). If you want a close button in one of the expanded section, simply give it the class ‘ closebutton ‘.

Finally make the section hide from all devices from responsive section.

Leave a Reply

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