Create a section that shows up only on button or icon click

No extra plug-ins required! Elementor Free Compatible.

To begin with, give the section that you want to appear a CSS class of ' showclick '

Give it the class ' showhover ' instead if you want it to show up upon hovering.

Elementor: Create a Section That Shows Up Only on Button Click​

Now, create a button or an icon, and give it the class ' clicktoshow ' or ' hovertoshow '

Elementor: Create a Section That Shows Up Only on Button Click​

If you use a button, empty the link field. (Hover this icon to see the picture)

Elementor: Create a Section That Shows Up Only on Button Click​

Finally, add this code in an html element on the same page

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.clicktoshow').click(function(){
$('.showclick').show();
$('.clicktoshow').hide();
});
$('.hovertoshow').mouseenter(function(){
$('.showhover').show();
});
$('.hovertoshow').mouseleave(function(){
$('.showhover').hide();
});
}); });
</script>
<style>
.clicktoshow{
cursor: pointer;
}
.showclick{
display: none;
}
.showhover{
display: none;
}
</style>

Keep in mind that the sections won't be accessible from the back end also. Just change the CSS that is in the html element a little bit when you want to edit them, and they will show back up.

Change 'display:none' to 'display:block' for showclick and showhover when you will want to edit these sections.

Important: This code will only work for one 'click section' and one 'hover section'  per page. It would require modification for additional sections you would want to show only upon click or hover in the same page.

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 >

x

Free Templates!

Subscribe to my news letter to receive the FREE template of this animated corner gift!

present

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 *