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.

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.

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.

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.

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.