Show & Hide Widget Using jQuery Toggle

In this tutorial, i’ll show you how to use a tiny amount of jQuery to create a toggle effect you can use to show and hide any widget.

Here’s the result:

The switch to show and hide the widget area is linked to a dashicon so you can choose from a large range then style and position based on your requirements.

All the code used to build this solution is highly flexible because you can:

• Use any Dashicon, position and style it using CSS
• Use different effects with the existing JQuery Toggle class to change the speed and effects
• Use the code on any existing or new I.D or selector class
• Re-use the JQuery and/or Dashicons on other pages of your site.

Code Installation Guide for Beginners

There’s a fair amount of code however it is very lean and minimalistic so you can easily modify or extend any of the snippets without much effort.

Functions Code

The PHP code needs to be pasted at the end of your child themes functions.php file.

It includes code to load the jQuery script conditionally only on posts it is actually needed and register the use of Dashicons on the front end so remove this if you have already included this code in your theme.

The other functions code simply registers and hooks in a new widget area after the header ion single posts only. The hook position and conditional tag are easy to change.

Replace .generate in the Javascript with the main selector class of your widget if using on an existing widget.

The 4th snippet hooks in the toggle icon before the widget area.

CSS Code

Simply paste the CSS in your child themes style.css file.

You can change the dashicon in this CSS.

JQuery

Only a tiny amount of JQuery is used in this solution which is the bare minimum to hide and show the widget area using the JQuery toggle class.

1. Simply create a new file named toggle.js using a code editor like Notepad++.
2. Copy the JQuery from the Gist labelled toggle.js and paste it into the new file
3. Upload the file to the root directory of your child themes folder
4. Make sure the path in the functions.php file is correct if you decide to add the file into your existing JS folder or another location.

Set jQuery To Hide On Page Load

Simply use the display:none CSS declaration in your style.css file with the class for the element your want to hide on each page load.

.toggle-widget { 
   display: none; 
}

Note: There’s no need to load JQuery again because the the wp_enqueue_script function tells WordPress this script is dependant on JQuery to work.

Loading JQuery again or adding the same script using different methods may cause conflicts resulting in the script failing to load or work correctly.