Expanding Section Demo

Demo to hide a section below an icon / button / link with the CSS Case ‘showme’ which opens a section DIRECTLY below, if an html element is placed in the top of the hidden section.

Add a new section to be hidden. Add a html widget and insert the code. Then set the section how you wish, and add the content.

Check out full ‘How-To’ demo on this link here:

https://elementorcodes.com/elementor-show-hide-section/

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

Add Heading First

Description text goes underneath with an invitation to discover more about this topic or feature...

Add Heading First

Description text goes underneath with an invitation to discover more about this topic or feature...

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Add Your Heading Text Here

Add Your Heading Text Here

Add Your Heading Text Here

Add Your Heading Text Here