Earlier this week I was contacted by a user in the Elementor Facebook group who wanted to know if it was possible to hide a section of content until a button was pressed revealing what ever content they wanted.
A she didn’t want to have to purchase another extension to accomplish this task.
With that being said let’s jump right in to it.
My Staging Environment
Theme: Hello Theme
Elementor Version: Pro
Additional Plugin: Simple Custom CSS and JS
Depending on your theme you may not need this plugin. Some themes may have a place for you to add custom jquery.
I like this plugin simply because I can deactivate scripts and they are all in one place.
I came up with my own usage scenario in which I might find a use for something like this. Below is what I came up with.
I am going to bypass the design portion as it is pretty basic and jump right into the meat of it and show you the layout before the jquery is applied.
The inner section is what we will be hiding. So for this to work we need to ad some CSS id to the trigger that will show our hidden section and also to the section we will be hiding.
For the Yes button I gave it the id of showBlock.
For the inner section I gave it the id of hiddenBlock. See images below.
Next we need to add some CSS to our customizer to hide the inner section.
With the inner section hidden it is time to add our jquery.
Navigate to Custom CSS & JS > Add Custom JS.
Give it a name I called mine Click Event and copy and paste this in the box below the comments.
If you have done everything correctly when you click the button your inner section should appear.
Let me know what you think in the comments. 😀