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.

Next IconIcon.net »

Previous « How to: Show what a user is searching for in the title

View Comments

Nick says:

February 17, 2011 at 3:40 pm

Is there a way to make this code work with buttons? I can get it to work just fine with a basic link, but I'd like to create a button that toggles...

Thanks!
donya says:

April 8, 2011 at 10:50 am

Love this! But, what I'd like to do is show/hide the div containing the comments on each of my Wordpress posts, on the index.php page, which contains multiple posts. Is there a way to modify the jQuery so that it hides each set of comments? Right now when I try to implement it, each botton (at the bottom of each post) closes just the first set of comments, rather than for the specific post.
nottingham laptop repair says:

June 4, 2011 at 2:28 pm

Have you ever accomplished that fully without errors?
Giorgos says:

June 8, 2011 at 12:28 pm

Thanks a lot! Exactly what I was looking for!!
buffalo glass block says:

July 12, 2011 at 3:06 am

i need this codes but does this work for all themes?
peng says:

August 21, 2011 at 12:38 pm

Thx a lot! I searched in Google for show/hide js script for WP and this is the only one that works perfectly in FF IE and safari...very good job Austin, thumb up!
gtjtyjtyu says:

September 16, 2011 at 7:34 am

yetyeteyeyerreyr
Adriana says:

October 31, 2011 at 12:20 pm

Hi Austin,

Thanks for posting this, it works like a charm and it's (almost) exactly what I need.
If you don't mind me asking, how could I make it slide from the bottom to the top?

Thanks a lot for your time!
Andy Nathan says:

November 4, 2011 at 9:47 pm

Will this work on any theme? or atleast any standard theme?