Key Elements

Key Elements

Elementor, jQuery, Tips & Tricks

How To Hide And Show Widgets On Click

  • Last Updated: March 4, 2021
  • 55 Comments

How To Hide And Show Widgets On Click

Earlier this week I was contacted by a user in the Elementor Facebook group who wanted to know if it was possible to hide and show widgets when 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.

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

55 Responses

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

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

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

      Have a nice day šŸ˜€

  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.

    1. Hi Edward,

      Give this try

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

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

  6. 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”);
    });
    });

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

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

    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.

  9. 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’);
    });
    });

    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.

    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

  11. 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!

    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 šŸ™‚

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

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

    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.

    2. I am working on updating the post to solve some of the issues.
      Thank you for your patience.

  13. 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!

    2. 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ā€™);
      });
      });

    4. Hi Anca, are you trying to change the image in a image widget or background section.

  15. 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?

    1. Hi Alexandre, Is there an example or wireframe of what you are trying to achieve.

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

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

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

  18. 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!

    1. I found the answer, it’s easy. Remove the link (also #) from the button. Done and works good now.

  19. How To Hide And Show Widgets On Click
    I put the code in inner section hiddenBlock Type then hide the section in backend but then frontend i click the button noting show
    and where i put the all java script code in astra theme

  20. 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();
    });
    });

    when i click then section showing but its showing only for 1-2 sec then its again hide. i don’t want to hide 1-2sec

  21. Is this code still working for everyone? I’m not able to get either version to work.

    When I inspect the page source, I can confirm that the IDs have been tagged to the appropriate elements, and the jQuery script has been added to the header. But there doesn’t appear to be anything happening when I click my button.

    2. Just leaving some extra details… I have more experience as an admin than as a developer, so I’ve had to fumble my way through troubleshooting this.

      I attempted debugging this issue from the console, first with javascript, then jquery. It seems that I am able to correctly select the element with CSS ID “showBlock”, but the .click() method doesn’t appear to run against the object.

      Using the element picker in Dev tools, I was able to identify the element selected by

      (javascript)
      const myElement = document.querySelector(‘#showBlock’)
      myElement

      -and-

      (jQuery)
      jQuery(‘#showBlock’);

      It looks like Elementor wraps their button elements in a div, which I’ve come to learn through recent research isn’t typically a best practice. What I’m not able to determine at this point is if there is a element that is nested or higher-up that is more appropriate to run the .click() method against, or if this is a bug in the Elementor plugin.

    4. My apologies Ess1dot I have been under the weather for the past couple of weeks and just finally got enough strength to do a little work. Will post an update soon. Thanks for your patience.

  22. Hey Aires,

    very nice script and tutorial, works fine for me! Thank you!

    I would like to use your script in some kind of conditional logic way. So ButtonA opens SectionA and ButtonB opens SectionB.

    It works but it would be nice If someone clicks on ButtonA opening SectionA first and afterwards clicking on ButtonB, SectionB is opened and the allready opened SectionA is closed.

    Right now, both Sections are open and stay open, until the exact button ist clicked.

    Is this possible? Would be great!

    Best regards,
    Alex

  23. Hello!

    Awesome guide. It’s working 1 by 1. But I have 4 buttons with 4 section. I want to only 1 section visible when I click a button. So if I click button 1 section 1 appear and when i click button 2 section 1 close section 2 open.

    I tried the other code that you mentionted, but It’s not working for me. Can you help me pls

  24. Hey, great code!
    I went through several sites and failed with their code, yours is simple and effective.

    my question:
    I have 3 buttons that each button is responsible for showing or hiding a particular element.
    I need that whenever I open an element, then the other elements will be hidden.

    Is there such a possibility?

Leave a Reply

Join Our Newsletter

Over 2000 Elementor Lovers.

Subscribe
Recent Posts
Recent Comments
  • Home
  • Articles
  • Resources
  • Contact
  • Terms & Conditions
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ā© 2019 Key Elements, All Rights Reserved