I whipped up a quick demo.  It's much easier when you give things classes to
hang your hat on.
http://commadot.com/jquery/toggleShow.php#

Glen

On Jan 15, 2008 7:53 AM, Michael <[EMAIL PROTECTED]> wrote:

>
> 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
>

Reply via email to