5/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.

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

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

How To Add A Reading Progression Bar To Your Elementor Site

In todays article we will be going over 2 ways to add a reading progression bar to your Elementor Powered Site. The first requires a wordpress plugin with simple options for the average user and the second is going to…

How to Make Attention Grabbing Buttons

Often times a button with just an hover effect isn’t enough to grab your visitors attention. So in this brief article I am going to show you how easy it is to make attention grabbing buttons to help with conversions…

How to Outline Text in Elementor

Outline text with a stroke often times gives your designs a really cool effect to make your designs come alive. So we are going to go over just how easy it is to implement outline text in Elementor. Let’s Begin…

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

  • 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
    • Evening Awais,
      Give me some time to play with the idea and I will post my findings here.

  • ¡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”);
      });
      });

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

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

    Reply
    • Give me some time I will review and try to provide you with a solution.

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

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

    Reply
    • 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.

  • I have a question. When I go to mobile view, the code stops working. Any clues as to why? Thank you

    Reply
    • Do you have a link so that I can view it.

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

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

  • Hi, where is the “Custom CSS & JS > Add Custom JS” added? I can’t find it.

    Reply
    • 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

  • 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!

    Reply
    • 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 🙂

    • Hi Jon, I will look into your other request.

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

  • 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

    Reply
    • 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.

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

  • 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!

    Reply
    • Hi Anca, Let me give this a try and I will post back.

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

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

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

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

  • 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

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

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

    Reply
  • 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!

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

  • 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

    Reply
  • 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

    Reply
  • 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.

    Reply
    • Hi Ess1dot,
      I will recreate in E 3.0 and see if anything has changed.

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

    • Any update? Or can you at least confirm that you experience this same issue?

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?