I have this code so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js";></script>
<script>
$(document).ready(function(){
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
});
</script>
<style>
div{
background:#000000;
margin:3px;
width:960px;
height:40px;
display:none;
float:left;
padding:15px 10px 0 0;
text-align:right;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Search Site</a></li>
<li><a href="#">Search Blog</a></li>
</ul>
<div id="google_search">
<!-- Google CSE Search Box Begins -->
<form action="http://www.google.com/cse";
id="searchbox_015980814770052224501:fkp-cgqshuk">
<input type="hidden" name="cx"
value="015980814770052224501:fkp-
cgqshuk" />
<input type="text" name="q" size="25" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript"
src="http://www.google.com/coop/cse/
brand?form=searchbox_015980814770052224501%3Afkp-cgqshuk&lang=en"></
script>
<!-- Google CSE Search Box Ends -->
</div>
<div id="blog_search">
<!-- Wordpress blog search -->
<form name="input" action="#" method="get">
Search:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
I need some help with the code.
First: I want the code to display the <div id="google_search"> when
the user clicks on the 'Search Site" link
And <div id="blog_search"> for when they press "Search Blog", only
displaying one at a time, not both at the same time.
Second: When I click in the search fields the div disappears. How can
I get rid of that so the user can enter a search into the box, but
still have the ability to click anywhere on the body to make that div
disappear.
Kind Regards
