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

  • hey austin,
    this was so nice - one question, i'm not getting this to work with multiple divs on the same click - i want to hide both divs at once, not with two buttons. do you know why this may not work:

    // toggles the slickbox on clicking the noted link
    jQuery('a#slick-slidetoggle').click(function() {
    jQuery('#div_a').slideToggle(400);
    jQuery('#div_b').sideToggle(400);
    return false;
    });
    });

    • Hey there Jonesy,

      This is something I'm trying to implement as well; I want to have the more insane parts of my ranting hidden by default, and one button at the top of the post that says "Bring the Crazy".

      The key is the diff between ID and CLASS... you can have multiple things with class "craziness", but you can only have one thing with ID craziness.

      It's still easy to do though - and no doubt in the last eight months (wrote GT, spotting the date) you've already found out how.

      I'll shut up now.

      Cheerio

      GT

  • Hi,

    Thanks for the great tutorial, and adaptaion for multiple show/hide DIVs, it works great!!

    There seems to bit a little problem with the jQuery and Firefox (3.5), whereby if the expandable DIV is at the very bottom of the page, the page flickers (quite harshly) when you hide the DIV (when it is expanded), as the page resizes to become smaller. Can't see evidence of this problem in Opera or Safari 4.

    I guess it's a problem with Firefox's capabilities, but is there a way around this problem?

  • Hi

    Ive got the code working, but if I use it on two or three elements they all work, i.e. open and close, when one of the links is clicked.

    Im wanting to create this into a shortcode in WP and would like to know how to get them to work independently without listing each separately.

    How do i get them to loop and work individually?

    Thanks in advance

  • Thx for this. I will try out now. I have to show/hide a calendar at side of a site. Hope this will help me :-)

  • Hi,

    Great tip! Much smaller than other solutions!

    But what if I want to query some posts in WordPress and don't want to have to add a bunch of functions for every post, I just want to be able to hide and show every post. You know what I mean?
    Would be great if you could help me with that!

    Thanks!

Recent Posts

WordPress Tips for Photographers

Photography is the art of capturing naturalistic images with the help of photographic cameras. It…

6 hours ago

10 Best Digital Marketing Plugins for WordPress 2022

Have you opened up a new website or a business and want to drive more…

6 hours ago

Configure your WordPress Site for SEO

WordPress has evolved greatly from its origin as a powerful blogging platform to an effective…

18 hours ago

In the yеar 2002, Mіcrоѕoft саmе uр wіth a whоlе new рlаtfоrm for developing арplicаtiоnѕ.

Busіnеsѕеs аnd orgаnіzatіоns аll аrоund the wоrld arе loоking fоr а ѕоlutiоn thаt wоuld prоvе…

1 day ago

The following 5 factors detail the key techniques to influence and improve your ranking on Google.

It is essential to draw people’s attention to your website or blog. It isn’t easy…

2 days ago

Futuristic Cars Make Parking a Piece of Cake

Cars are one of those things that so many of us have that have been…

2 days ago