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.
Planning Who let you in? Format Daily Weekly Monthly Hour/half hour A show's Outline -…
I'm sitting downstairs at WordCamp 2009 in San Fransisco. Up on stage right now, Andy…
Choosing the best photo editing apps for e-commerce depends on your specific needs and budget.…
For your information. The WordPress fonts are as follows: the old WP logo was Dante,…
WordPress announced the release of 2.8 beta 2, download it or check out the changes since…
According to the International Trade Administration, worldwide eCommerce growth increased by 19% in 2020. Most…
View Comments