Delphinidin

Searching is an integral part of the Web and quite possibly why Google is the most successful company around today. Every user expects to be able to search and easily find what they are looking for on your site. Building a better user interface that gives your users the ability to find everything your site off ers right at their fingertips is an important improvement. Mozilla has a large community of developers who create add-ons for the Firefox browser. An example of their search bar with advanced options. If you click the advanced options, the advanced option search bar slides down, which is a nice touch because it keeps you on the same page but allows you to expand your search. This feature can be easily added with jQuery using the slideToggle method. The slideToggle method is very similar to the toggle method for showing and hiding elements, except that it isn't already attached to a click event. If the element is already shown and slideToggle is invoked, it is set to slideUp. The opposite happens if the element is hidden.

$('.message').slideToggle();

In the following tutorial, I show you how to set up an advanced search menu that slides into place using the slideToggle() method.

1. Create the HTML for the search input and advanced search options:

<style>
body {font-family:arial;}
.advanced {display:none;
padding:3px;
border:1px solid #ccc;
width:300px;
}
</style>
<div id="search">
<h1>Johnny's Superstore</h1>
<input type="text" width="60" />
<input type="submit" value="search"/><br>
<a href="#" class="advanced-search">Advanced Search</a>
<div class="advanced">
<input type="radio" name="category"/> Clothing<br/>
<input type="radio" name="category"/> Electronics<br/>
<input type="checkbox" name="sale"/> Clearance Only<br/>
</div>
</div>

2. Set up a selector statement for the advanced-search element and bind a click event handler to it. Within the event handler, set up a selector for the advanced element and add the slideToggle method to it.

$('.advanced-search').bind('click',function(){
$('.advanced').slideToggle();
});

Each time the advanced-search input button is clicked, the advanced search options element slides either up or down, depending upon which state the element is in when the page loads. In this case, the advanced-search element is hidden using a CSS style on page load.