Elementor, jQuery, Tips & Tricks

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.

[css]
#hiddenBlock {
    display: none;
}

[/css]

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.

[css]
jQuery(document).ready(function( $ ){
    // Your code in here
  $('#showBlock').click(function() {
        $('#hiddenBlock').show("slow");
    });
});
[/css]

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. 😀

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.

9 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
  • Thank You So Much For This Helpful Guide, I,m Trying To Achieve Similar Result But Using A Heading Widget Not Button .. How Can I Achieve That ?

    Reply
  • ¡Works great! But when i clic the button again does’nt close the widget. the idea is in first clic open de widget and in a second clic closed the widget. How we can do it in JS.

    Reply
    • Hi Edward,

      Give this try

      jQuery(document).ready(function( $ ){
      // Your code in here
      $(‘#showBlock’).click(function() {
      $(‘#hiddenBlock’).toggle(“slow”);
      });
      });

      Reply
  • Not working for me – i have the exact same setup as you. Do you know if this still works in pro 2.8.1?

    Reply
    • Make sure the id’s and jQuery is the same. It does work and it shouldn’t matter what version.

      Reply

Leave a Reply

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.

Request A Tutorial

Have a request I would love to hear about.

Latest Post

How to swap out your logo in your sticky header

This tutorial is going to answer a question that I have seen tons of times across multiple Elementor community groups. And the questions is " How to a change my logo once my header becomes sticky?" .