How to Show and Hide Widgets in WordPress in 4 Easy Steps

Refine Skill content is free. When you purchase through referral links on our site, we earn a commission. Learn more

There might be situations where you would like to show and hide widgets in the WordPress site, with the click of a button. For example, you might need to show custom forms based on the user choice. You may be thinking of how to show and hide widgets in WordPress with on the click of a button? and the good thing is you can easily achieve this with the use of little CSS and JavaScript. Here, we will demonstrate how to show and hide widgets on the click of a button on a WordPress Website.

Depending upon the theme you are using, you might need to tweak or do it differently on your WordPress website. The demonstration we’ve done is on the Avada theme, but it should also work even if you are using other themes. Let us know, how the solution “show and hide widgets in WordPress site” is working for you, in the comment section below.

Demo EnvironmentWordPress Version: 5.4.2 Avada Version: 7.0.1 PHP Version: 7.3.20

The plugin used: Header and Footer Scripts
Note: This plugin is used to add JavaScript code to a specific page. If you already have some other plugins that allow you to add the script, you may not need this one.

In this example, we will be creating three buttons and these buttons will show and hide respective sections.

Step 1: Add Buttons

Add a Container with three columns and add a button to the first column.

Give a specific CSS ID for the button. In this case the CSS ID for button is ButtonA. Now, repeat the same process and add a button on each column.

Here, CSS ID for the buttons are ButtonA, ButtonB and ButtonC respectively. You will relate this when you see the JavaScript code below.

Step 2: Add Widgets to Hide and Show on Click of the Buttons

Now Add a container that you want to show on click of Button A. Give a specific CSS ID.

Add another two containers and repeat the same. In our context, the CSS ID for the containers is ButtonASection, ButtonBSection and ButtonCSection respectively.

Step 3: Add CSS Code to Hide Widgets

Now, navigate to Avada->Options->Custom CSS and add the following code. This code will hide all the three sections by default.

#ButtonASection{
    display:none;
}
#ButtonBSection{
    display:none;
}
#ButtonCSection{
    display:none;
}

Step 4: Add JavaScript Code to Show and Hide Widgets in WordPress on Button Click

Now, we’ll add a JavaScript code to show each section on click of the buttons respectively. Go to the page editor and add the following code in the Insert Script to head section. This section will be available because of the plugin we’ve installed earlier.

<script type="text/javascript">jQuery(document).ready(function( $ ){
 
  $('#ButtonA').click(function(e) {
        $('#ButtonASection').show();
	    $('#ButtonBSection').hide();
	    $('#ButtonCSection').hide();
  e.preventDefault(); 
    });
	
	$('#ButtonB').click(function(e) {
        $('#ButtonASection').hide();
	    $('#ButtonBSection').show();
		$('#ButtonCSection').hide();
  e.preventDefault(); 
    });
	
	$('#ButtonC').click(function(e) {
        $('#ButtonASection').hide();
	    $('#ButtonCSection').show();
		$('#ButtonBSection').hide();
  e.preventDefault(); 
    });
	
});</script>

Now Publish and view the page.

Adjust the ID and code accordingly and make it work. Happy WordPressing…..

We hope you’ve got your answer to “How to show and hide widgets in WordPress on click of a button”. Let us know in the comment section below.