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

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…

3 hours ago

The Best Christmas Apps for iPhone 5

The Christmas spirit is often one that takes a little while to get into, however,…

9 hours ago

5 Unique Business Card Designs Your Clients Will Love

Business cards are an excellent way to share your information, especially if you're self-employed. The…

21 hours ago

8 Content Ideas To Boost Your Real Estate Blog

When you have a real estate blog, sometimes it can be difficult to come up…

1 day ago

A Tweeter Guide to Branding Marketing Stars-Luminaries You Should Follow

When it comes to your business, marketing is extremely important. With the popularity of social…

2 days ago

Lost? Since You Can’t Trust Apple Maps, Check Out These 3 Apps Instead

Maybe you have the new software on your Apple device that has made headlines as…

2 days ago