Connect with us

News

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

Published

on

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" onclick="this.value='';" name="s" id="s" />
            <input type="text" name="search-button" id="search-button" value="<?php _e('Search') ?>" />
        </div>
    </form>
</div>

That’s it.

Continue Reading
39 Comments

39 Comments

  1. Pingback: WordPress Links week 6 - 2009 | WPStart.org - WordPress themes, plugins and news

  2. ket

    February 8, 2009 at 2:25 am

    Man I like this trick and will add it to my theme. Thanks for sharing.

    ket´s last blog post..

    • Willie P

      June 17, 2011 at 5:39 pm

      I agree, this is a great little trick and will be implementing it on one of my blogs pretty quick here.
      Thanks!

  3. John MacMenamin

    February 17, 2009 at 9:14 am

    Great Tip I’m using it (Adapted) in a theme.
    Thanks again

    John MacMenamin´s last blog post..Client Coupon Solution for WordPress in Two Colors!

  4. Jimmy

    February 17, 2009 at 10:11 pm

    Is it possible to hide multi Div boxs with jQuery? and If so how?

    • frosty

      February 18, 2009 at 1:00 pm

      There sure is Jimmy,
      All you need to do is reuse the code, and change the #id to the new div box #id.

      since we already have:
      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;
      });
      });

      We just need to add in:

      jQuery(‘#toggle-search’).hide();
      jQuery(‘#toggle-tags’).hide(); //option to hide the ID before the page loads

      And:

      jQuery(‘a#slick-slidetoggle’).click(function() {
      jQuery(‘#toggle-search’).slideToggle(400);
      return false;
      jQuery(‘a#slick-slidetoggle-tag’).click(function() {
      jQuery(‘#toggle-tags’).slideToggle(400);
      return false;

      That’s it for the function. Just make sure you create a div box with the id of #toggle-tags

      • Edhuan

        August 1, 2009 at 11:30 pm

        You missed out the ” }); ” . Thought I might point it out to save others from some frustration. Thanks for pointing out how to add multiple boxes.
        🙂

        jQuery(document).ready(function() {
         // hides the slickbox as soon as the DOM is ready
         jQuery('#toggle-topic1').hide();
         jQuery('#toggle-topic2').hide();
        
         // toggles the slickbox on clicking the noted link
         jQuery('a#slick-slidetoggle1').click(function() {
         jQuery('#toggle-topic1').slideToggle(400);
         return false;
         });
         jQuery('a#slick-slidetoggle2').click(function() {
         jQuery('#toggle-topic2').slideToggle(400);
         return false;
         });
        });
        
  5. hamid

    March 14, 2009 at 4:17 am

    Thanks a lot for that,
    but there something confusing me, i set it up like u said exactly and it works very fine, but it’s not working inside the categories in wordpress when im using the permalinks?
    do you know why is that?

    • Austin Passy

      March 14, 2009 at 3:34 pm

      I’m not sure I understand what your talking about. Do you have an example?

  6. Mark

    March 15, 2009 at 2:29 am

    Nice script – I’ll add it to my blog as well. Many thanks.

  7. J.lE

    March 23, 2009 at 7:09 am

    nice plugin, will try it.

    J.lE´s last blog post..KnownHost

  8. RaiulBaztepo

    March 28, 2009 at 6:00 pm

    Hello!
    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language 😉
    See you!
    Your, Raiul Baztepo

  9. Bill

    April 23, 2009 at 4:13 am

    Thanks for the info! It still amazes me everything you can do with JQuery.

  10. Craig

    September 1, 2009 at 7:45 pm

    This is exactly what I was looking for, thanks!

    One question though. Is it possible to hide the box permanently by maybe setting a cookie, or checking if user is logged in?

    • Austin

      September 2, 2009 at 5:45 pm

      There is, you’d have to look into the jQuery cookie tutorial for how to do this.

  11. aron

    September 7, 2009 at 1:47 am

    Hi Austin

    Can we use inside a loop?

    • Austin

      September 7, 2009 at 6:12 pm

      yes.

  12. dave

    September 13, 2009 at 2:57 am

    many thanks for this.

    is there a way to set the div to “show” on load, and “hide” on click?

    thx in advance.
    .-= dave´s last blog ..Closing the deal with Live Help =-.

  13. jonesy

    September 24, 2009 at 6:41 am

    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;
    });
    });

    • GT

      August 15, 2010 at 9:38 pm

      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

  14. Mike

    October 27, 2009 at 10:43 am

    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?

  15. Blake

    May 17, 2010 at 10:32 am

    Very cool tutorial. Will give it a shot on my site.

  16. Pingback: Photo Catalog

  17. Andy

    June 24, 2010 at 9:20 am

    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

  18. Gimei

    July 14, 2010 at 6:25 am

    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 🙂

  19. Carports

    August 11, 2010 at 11:13 pm

    I’m glad to this is usable in the loop.

  20. Bill

    August 19, 2010 at 4:13 pm

    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!

  21. Pingback: Razee » Blog Archive » How to Expand/collapse WordPress posts with jQuery

  22. Adrian

    December 18, 2010 at 2:33 pm

    fixed ok thnx

  23. F.

    January 31, 2011 at 5:22 pm

    Awesome. Thanks.

  24. Nick

    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!

  25. donya

    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.

  26. nottingham laptop repair

    June 4, 2011 at 2:28 pm

    Have you ever accomplished that fully without errors?

  27. Giorgos

    June 8, 2011 at 12:28 pm

    Thanks a lot! Exactly what I was looking for!!

  28. buffalo glass block

    July 12, 2011 at 3:06 am

    i need this codes but does this work for all themes?

  29. peng

    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!

  30. gtjtyjtyu

    September 16, 2011 at 7:34 am

    yetyeteyeyerreyr

  31. Adriana

    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!

  32. Andy Nathan

    November 4, 2011 at 9:47 pm

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

You must be logged in to post a comment Login

Leave a Reply

News

The WordPress Logo

Published

on

For your information. The WordPress fonts are as follows: the old WP logo was Dante, the new one is Mrs. Eaves. You can also find the correct logo’s on WordPress.org.

Continue Reading

News

The release of Galleria, a gallery child theme of Hybrid

As the WordPress community grows, so does the amount of available themes. Galleria is a gallery-style child theme for WordPress built on the Hybird theme framework. Originally, this theme was created by Chirs Wallace for the Thematic theme framework and released at Smashing Magazine.

Published

on

So I am excited to announce another theme release from WPCult and Frosty Web Designs. A few days back, I came across this post at Smashing Magazine.

Just recently we asked you to let us know what theme you would like us to release next. Among numerous comments we found many request for a gallery-theme that could be particularly useful for portfolios and showcases. At the very same time Christopher Wallace has been designing an advanced gallery-WordPress-theme for the design community and Smashing Magazine’s audience. And today finally we are proud to release it – for free, of course.

Well, I liked this theme, and while I am a big fan of the Thematic theme, I know there are many out there who love Hybrid. Hybrid is Justin Tadlocks theme framework, which can be downloaded for free at http://themehybrid.com/themes/hybrid.

Just an FYI, this site is running hybrid as a parent theme. 🙂

So…

I contacted Chris and told him of this theme port I would be doing. After a few days of modifications, bug fixes, and styling, the theme is ready for public release.

While Galleria shares a few qualities with his sibling, the differences are notable in the style, color, and layout throughout the theme, including the theme options.

More info

For more info and documentation, refer to the readme.html file included in the download or visit the Galleria theme page.

Some features

  • dynamic image re-size on a single page.
  • WordPress 2.7 compatible
  • Built on the Hybrid framework
  • jQuery hover effects
  • jQuery scrolling effects.
  • ‘Save to Delicious’ link
  • ‘Tweet This’ link
  • Flexible footer widget area

Download [download#5#format=2]

Continue Reading

News

The new design in progress

Published

on

Okay, so by now you may notice something. You may be thinking “the site looks a lot different”, and you are correct. Over the past few weeks I’ve decided that the site needed a different flare and feel. While many and most site’s these days are popping up with featured posts, and jQuery sliders, I wanted to steer away from that and go old school. While I had some trouble’s activating the theme today which didn’t allow me to fully finish the theme, 99% of it is done.

The site is still build on the powerful Hybrid theme framework. Enjoy.

Continue Reading

Random Search Terms

Title

Recent Posts: Fully Net Worth . com

Candy Ken Net Worth: How Rich is the Rapper from Austria?

Candy Ken Net Worth: How Rich is the Rapper from Austria?

Candy Ken Jakob Kasimir Hellrigl known by his stage name as Candy Ken is an Austrian rapper, model, and TikToker. Ken is best known for his masculine appearance with feminine pop culture. As of May 2020, Candy Ken’s net worth is estimated to be $2 million. Jakob was born on July 27, 1992, (Leo) in […]

Flipp Dinero Net Worth: How Rich is the Rapper Actually?

Flipp Dinero Net Worth: How Rich is the Rapper Actually?

Christopher Saint Victor, who is better known by his stage name as Flipp Dinero, is an American rapper and songwriter. He became viral after Odell Beckham, the football player posted a video of him dancing to his song called “Leave Me Alone”. As a result, the song would peak at number 20 in the Billboard […]

Tony Beets Net Worth: How Rich is the Gold Miner Actually?

Tony Beets Net Worth: How Rich is the Gold Miner Actually?

Tony Beets is a Gold Miner and one of the most popular cast members on the reality series Gold Rush which airs on Discovery. He is known to be one of the biggest gold miners in Canada and owns the Tamarack Mine and Paradise Hills. As of 2019, Tony Beets net worth is estimated to […]

Robert Herjavec Net Worth

Robert Herjavec Net Worth

Robert Herjavec Net Worth.   Of all the famous global entrepreneurs, Robert Herjavec’s name tops the list. He is a Canadian investor, businessman, tv personality, author, and publisher. He founded a Canadian integrator of Internet security software, called the BARK systems, and sold it to AT&T Canada, now called Allstream Inc in the year 2000 […]

Trending