How To Hide And Show Widgets On Click

Difficulty Rating :
Written byAires DaGraca

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.

Let’s Begin

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.

Button
Inner Section

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. šŸ˜€

Was this article helpful?

Awesome, follow us on Twitter or Like us on Facebook

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

2 Comments

  • Nice try but i would rather do a toggle on a button

    jQuery(document).ready(function( $ ) {
    $(‘#searchButton’).click(function() {
    $(‘#searchBar’).toggle();
    });
    });

    Reply
    • The method outline in the post suited my needs as your example Iā€™m sure suited yours.

      Have a nice day šŸ˜€

      Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.

Hello, would you like to take a survey before you leave.

Your answers will help us provide more and useful content.
Thank you for your time.