Elementor, jQuery, Tips & Tricks
3/5

How To Hide And Show Widgets On Click

Last updated 05/19/2020

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.


#hiddenBlock {
    display: none;
}

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.


jQuery(document).ready(function( $ ){
   
  $('#showBlock').click(function(e) {
        $('#hiddenBlock').show("slow");

  e.preventDefault(); 
    });
});

Toggle Version

jQuery(document).ready(function( $ ){

   $('#showBlock').click(function(e) {
   $('#hiddenBlock').toggle("slow");

   e.preventDefault(); 
 });
});

If you have done everything correctly when you click the button your inner section should appear.


Revised Version for Handling Multiple Widgets on the Same Page

All though the method above works great many of you have wanted a solution for hiding multiple items on the same page as the jQuery used above did not allow you to do so.

The solution required some additional lines of code but should not be too difficult to implement.

For this script the CSS used above can be omitted just be sure that your classes match up and things should work as planned.

jQuery(document).ready(function( $ ){
    
  var hbtn = $(".showBlock");
  var hcon = $(".hiddenBlock");
  
   hcon.hide();
   hbtn.click(function(e) {
   var index = hbtn.index(this) 
   $(hcon).eq(index).slideToggle("slow");

   e.preventDefault();     
    });
});

I used variables this time around so that there wouldn’t be a need to repeat the classes through out the script.

To prevent the jumping to the top of the page when clicking the button an event preventDefault() had to be added to stop the default action from happening. So this was added to both scripts single and multiple toggles. Alternatively you can remove the (#) but doing so will remove the pointer effects and you would need to add them back with CSS.

 

If you decide to go this route and remove the (#) here is the CSS you will need:

 

.your-custom-class {
cursor: pointer;
}

 

This will add the pointer back to the button.

**Special thanks to everyone who contributed to the solution with their opinions and suggestions.

Remember to use classes if you plan too have multiple toggle elements IDs are not meant to be used in that way.

The Result:

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.

Related Posts

**Responses and Solutions to comments are handled on Sundays & Mondays.

43 Responses

  1. Nice try but i would rather do a toggle on a button

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

    0
    0
  2. 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 ?

    0
    0
  3. ¡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.

    0
    0
    1. Hi Edward,

      Give this try

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

      0
      0
  4. Hello Aires,
    it is working for me, but could you please help me with click between 2 or more buttons?
    When I click on block1 it shows, but when I click on block2 I need to hide block1, when I click on blockx, I want to hide shown block.
    It is possible ? Thank you

    #hideblock1 {
    display: none;
    }
    #hideblock2 {
    display: none;
    }

    jQuery(document).ready(function( $ ){

    $(‘#showblock1’).click(function() {
    $(‘#hideblock1’).show(“slow”);
    });
    });

    jQuery(document).ready(function( $ ){

    $(‘#showblock2’).click(function() {
    $(‘#hideblock2’).show(“slow”);
    });
    });

    0
    0
      1. I have the same problem I have done like that ( is not the best way ) but how to set up to open only one content in one time like tabs ?

        0
        0
  5. This was exactly what I was looking for, thank you! I was wondering how you unhide the section. I realized I need to edit some of the information on the hidden section and now it’s gone lol. Any thoughts?

    0
    0
    1. Hi Brian, you can either disable the script or use the navigator to select it even though you can not see if all you need to change is text.

      0
      0
  6. There is a problem when you copy/paste the toggle method. (the curled quotemarks )

    Anyway, When clicking the button the inner section scales up from the top left corner to full size.
    I did not like that and I changed it.

    I removed the display: none CCS rule and used the hide function in jquery:

    jQuery(document).ready(function( $ ){

    $(‘#hiddenBlock’).hide()

    $(“#showBlock”).click(function(){
    $(‘#hiddenBlock’).slideToggle(‘slow’);
    });
    });

    0
    0
    1. Thanks Frank for pointing out that error and offering your solution. I fixed the issue so that it will not give others an issue.

      0
      0
    1. Hi B, There is another plugin required for those options to show up scroll to the top there is a link to it additional plugin area.
      Thanks

      0
      0
  7. Hi. Could you clarify a few things based on some of the above comments made?

    Edward above asked about hiding the result on clicking for a second time and you posted this code…

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

    But looking at your original code it looks the exactly same apart from //your code here – Im not too savy with this but what code?

    Secondly, Frank commented that on click the new content scales from upper left which i noticed. You said you had fixed it. Did you mean in the original code you fixed it? It still scales from upper left for me. What is the code for fixing it?

    Thanks in advance for your feedback!

    0
    0
    1. Actually let me alter what I said – If I do multiple buttons the first button wont hide on second click but all subsequent buttons do.

      What I am noticing which would be great if you knew how to do it is that If I have 4 trigger buttons in sequence and I have revealed all the hidden content then If I want to hide all the content again i have to click each button in reverse order. If for example I click the first button it will hide only the first revealed content and not those ahead of it. Does that make sense? It would be good if it broke the chain and hid all subsequent content 🙂

      0
      0
    2. Hi Jon, I will recreate this issue in the hopes that I see the issue your are describing. As for the fixed Frank simple replaced the (“) for these (‘) around the word slow either should work without any issues. But will review this tutorial and update it if needed.

      0
      0
  8. Thank you for this. It works but I am running into a couple of problems.

    1. I’ve used a ‘#’ in the button widget. When this is clicked, it returns to the top of the page. How do I stop this?

    2. I want to re-create a ‘show more’ / ‘show less’ function with a fade. Similar to this… https://codepen.io/ojbravo/pen/YPJpXe

    Thanks again

    0
    0
    1. I do have a similar problem.
      I have 4 elementor premium buttons and every time I click on the lower ones it returns on the top of the page.

      0
      0
  9. Hello, I have a button whose CSS ID is “primu” and an image with the CSS ID “change-image” .
    I went to Customize -> Custom CSS/JS -> Custom JS and i wrote this code :

    jQuery(document).ready(function($){
    $(‘#primu’).click(function() {
    $(‘#change-image’).attr(‘src’,’/wp-content/uploads/2020/04/pinup-style-lip-print_53876-8546.jpg’);
    });
    });

    However my button has a “#” as a link and it redirect me to the top of the page. If I delete this, it won’t do anything…. What I want to do is when the user clicks the button, the default image uploaded to be changed to the new one in the code…. what’s my problem? do you know where am i wrong? Thank you!

    0
    0
    1. Hello Anca,

      I am not sure how to do your image change but I had a similar problem with the ‘#’ link in the button.

      To prevent this from jumping back to the top of the page, try the following:

      jQuery(document).ready(function($){
      $(‘#primu’).click(function(e) {
      e.preventDefault();
      $(‘#change-image’).attr(‘src’,’/wp-content/uploads/2020/04/pinup-style-lip-print_53876-8546.jpg’);
      });
      });

      0
      0
  10. Hi there,

    I am trying to use your code on my website, my plan is to have some kind of a TAB, which the “tabs” will be columns that I will be the toggle and below the contents should appear as I click on each column/tab.

    But I just can’t make it work.

    Can you help me out?

    0
    0
  11. Hello, I hope you can help me with this, I want to make on click events in a list of links that bring a different image (maps) in the column next to the link list, like you can see in the interactive map at the next site http://www.alteadesarrollos.com

    I would like to use elementor pro or one of its add ons

    I really appreciate your time in advance

    Regards

    0
    0
    1. Hi Lucio, I think its possible with a little jQuery and CSS while post back when I have a working example.

      0
      0
  12. Hi, I this works fine to hide 1 section with the button but if i want to toggle multiple sections with one button how will that work. I am adding the same class for each of those sections but still it is not working.

    0
    0
  13. This is working fine for me, to open and hide a section with comments on a blog post. However, which is not good, after clicking the button the content is jumping back to the top of the page.

    I tried to add. e.preventDefault(); as mentioned in teh comment above by Jamie, but it doesn’t help.

    Thanks anyway!

    0
    0

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.