refine skill

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 WordPress site, on 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 on 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 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 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 Environment

WordPress Version: 5.4.2
Avada Version: 7.0.1
PHP Version: 7.3.20

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

show and hide widgets
show and hide widgets in wordpress

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 button on each column.

show and hide widgets in wordpress

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 which you want to show on click of Button A. Give a specific CSS ID.

show and hide widgets in wordpress

Add another two containers and repeat the same. In our context, the CSS ID for the containers are 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.

Copy to Clipboard

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

show and hide widgets in wordpress
Copy to Clipboard

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 for “How to show and hide widgets in WordPress on click of a button”. Let us know in the comment section below.

Leave A Comment

Hire a Tech Professional

Looking for a tech resource person? We are here to help you.

    I am a Human

    Follow us on social media

    Recent Posts