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.
If you want to sustain yourself in the world of progress, it is important…
Promoting your products/services in the online space is all about engaging the targeted customers. That,…
Technological advancement has swept over, our entire generation, engulfing us in its constantly evolving arms.…
Photographers, avid bloggers, tech junkies, and even food bloggers have shown their love & trust…
WordPress has been one of the most dominating CMS and more domains are now going…
Using a WordPress theme for a website comes with plenty of advantages. One great feature…
View Comments