Categories: News

How to: Show/Hide any div box with jQuery in WordPress

If you take a look at my current sidebar (right) and see the heading Google Search you’ll notice that when you click it the Google Search box show’s into view.

Let me show you how this is done.

First make sure that your WordPress site is calling jQuery, buy pluggin this code into our 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">
jQuery(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  jQuery('#toggle-search').hide();

 // toggles the slickbox on clicking the noted link
  jQuery('a#slick-slidetoggle').click(function() {
 jQuery('#toggle-search').slideToggle(400);
 return false;
  });
});
</script>

That’s simple, huh. Okay now lets write the Search code:

<h2><a href="#" id="slick-slidetoggle">Google Search</a></h2>
 <div id="toggle-search" style="padding:10px;">
    <form method="get" id="search" action="<?php bloginfo('home'); ?>/">
        <div>
            <input type="text" value="Enter Keyword" >

That’s it.

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.

View Comments

Recent Posts

How Will You Improve Accessibility of Your WordPress Site?

  If you want to sustain yourself in the world of progress, it is important…

1 hour ago

How Can You Make Your Business Website More Interactive?

Promoting your products/services in the online space is all about engaging the targeted customers. That,…

13 hours ago

Swirling Away Young Minds, with Cool Gadgets

Technological advancement has swept over, our entire generation, engulfing us in its constantly evolving arms.…

1 day ago

7 Finest Places on Web to Find Excellent WP themes

Photographers, avid bloggers, tech junkies, and even food bloggers have shown their love & trust…

2 days ago

WordPress VS Enterprise CMS – Which one to Pick?

WordPress has been one of the most dominating CMS and more domains are now going…

2 days ago

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…

3 days ago