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.
Here is a simple way to call query_posts with an array of options. For all…
Looking to add a favicon to you site? Inside your WordPress theme's functions file (functions.php)…
Wow, have you heard? WordPress has announced that the newest version, 2.8 which was thought…
I just came across this article over at WPLover. Was very good, especially since I…
Today has released an update to his Hybrid Theme. Version 0.5.1 can be found at…
If you've downloaded the Swekey plugin and plan on using it for users to login…
View Comments
Man I like this trick and will add it to my theme. Thanks for sharing.
ket´s last blog post..
I agree, this is a great little trick and will be implementing it on one of my blogs pretty quick here.
Thanks!
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!
Is it possible to hide multi Div boxs with jQuery? and If so how?
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-tagsYou 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; }); });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?
I'm not sure I understand what your talking about. Do you have an example?
Nice script - I'll add it to my blog as well. Many thanks.
nice plugin, will try it.
J.lE´s last blog post..KnownHost
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
Thanks for the info! It still amazes me everything you can do with JQuery.
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?
There is, you'd have to look into the jQuery cookie tutorial for how to do this.
Hi Austin
Can we use inside a loop?
yes.