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.
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…
If you provide a service or product, then the amount your business earns will always…
As the manager of a busy restaurant, you have many responsibilities on your plate. However,…
Content marketing has become a vital part of search engine optimization because it's had no…
If you want to sustain yourself in the world of progress, it is important…
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.