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

No extra plug-ins required! Elementor Free Compatible.

Here is the new section!

templates

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

This is the code to show the Elementor Section on click.

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.clicktoshow').each(function(i){
$(this).click(function(){ $('.showclick').eq(i).show();
$('.clicktoshow').eq(i).hide();
}); });
}); });
</script>
<style>
.clicktoshow{
cursor: pointer;
}
.showclick{
display: none;
}
</style>

This is the code to show the Elementor Section on hover.

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hovertoshow').each(function(j){
$(this).hover(
function(){
$('.showhover').eq(j).show();
} ,
function(){
$('.showhover').eq(j).hide();
});
}); }); });
</script>
<style>
.showhover{
display: none;
}
</style>

Keep in mind that the sections won't be accessible from within the editor. 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 work for as many '.showclick' and '.clicktoshow' instances are present on your page.

It will automatically link the first element with the class '.showclick', with the first element that has the class '.clicktoshow', and so on.

Same goes for the hover version. 

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>