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.
Did you know that it's easier to increase your earnings each month from 2K to…
The poor economic climate here in the UK has left many small businesses struggling to…
When it comes to SEO services, there are a number of benefits that you’ll find…
Cloud computing has revolutionized the way most companies manage and store data. However, many corporate…
Different degrees come with different benefits. Some come with pay increase advantages, some come with…
For many people, one of the most important choices they will make during their lifetime…
View Comments
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 =-.
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?
Very cool tutorial. Will give it a shot on my site.
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 :-)
I'm glad to this is usable in the loop.
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!
fixed ok thnx
Awesome. Thanks.