Categories: Tips & Tricks

How to: show/hide a widget in WordPress with jQuery

As seen in the current theme, I am using jQuery to animate the show/hide or as known as the css style display: none;.

Since I am using a custom child theme on my site, and have Hybrid theme as my parent, the widgets or sidebar section is different than may be in your theme. But just apply the the style’s as follows to your theme.

First make sure that your WordPress site is calling jQuery, by plugging in this code into your header.php file above the <?php wp_head(); ?> text:

<?php wp_enqueue_script('jquery'); ?>

Then anywhere above the </head >, plug this code in:

<script type="text/javascript">
function toggleWidgets() {
 $('#primary h3.widget-title').addClass('plus');

 $('#primary h3.widget-title').click(function() {
  $(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
 });

}
$(document).ready(function() {
 toggleWidgets();
}
</script>

That’s it. Pretty simple huh.

So lets go over what the code does.

$('#primary h3.widget-title').addClass('plus');

This line finds all <h3> tags with the class widget-title inside the ID parameter of #primary and adds a class of plus.

Then

$('#primary h3.widget-title').click(function() {
  $(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
 });

Will apply a click function. When the H3 tag is clicked it will remove the class plus and add the class minus.

Then the code that says .next will then toggle the “next” element after the <h3> title.

Web Master

Hi, I am Miguel, I bought this site in 2009. So I now run or manage the site. Please visit my new website or follow me on twitter @W3i.

Recent Posts

Guidelines for Choosing the Best WordPress Theme for Your Website

Using a WordPress theme for a website comes with plenty of advantages. One great feature…

6 hours ago

Top Six ways to Use QR Codes as a Web Design Tool

How can you link QR codes to digital content? When a QR code is read…

6 hours ago

Should You Recycle Old Material to WordPress?

As a writer, or as a business owner doing some serious blogging, you probably wish…

18 hours ago

The Complete In-Depth Guide to Getting Started with WordPress Development in 2022

Is WordPress Easy for Beginners? Yes, WordPress in all fairness is clean for novices to…

1 day ago

Best Shopping Cart Themes for WordPress

With time and innovation, WordPress has undergone a lot of changes and is now completely…

2 days ago

Beat Recession Blues with These PHP Web Development Best Practices

With the recession taking over the majority of economies across the globe, securing your job…

2 days ago