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.
Using a WordPress theme for a website comes with plenty of advantages. One great feature…
How can you link QR codes to digital content? When a QR code is read…
As a writer, or as a business owner doing some serious blogging, you probably wish…
Is WordPress Easy for Beginners? Yes, WordPress in all fairness is clean for novices to…
With time and innovation, WordPress has undergone a lot of changes and is now completely…
With the recession taking over the majority of economies across the globe, securing your job…
View Comments