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 ' , or ' showhover ' if you want it to show up upon hovering.
Now, create a button or an icon, and give it the class ' clicktoshow ' or ' hovertoshow '
If you use a button, empty the link field. (Hover this icon to see the picture)
Finally, add this code in an html element on the same page
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!
Get awesome new designs right in your inbox!
No spam, not more than one weekly email.
Support my work by buying Elementor Pro , or addons, through my links
This is how you can easily create a smooth slider that doesn't automatically skips to the upcoming item. Similar to Netflix.