HELP!! .toggle(drop) problem

HELP!! .toggle(drop) problem

Hi all,

Im really stumped so if anyone is any good with jquery i could really use your help! Im trying to get elements to display only one at a time using 'toggle' (so that if a user clicks one link it toggles some info in a div, a different link toggles diferent info and hides the first set of info etc... if u catch my drift!)

I have managed to acheive this with the code below:


   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <title>Fade Slider Toggle jQuery Plogin</title>

         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
         <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
         <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
         <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
         <script src="http://jqueryui.com/demos/toggle/js/demos.js" type="text/javascript"></script>
         <script src="http://jqueryui.com/demos/toggle/themeroller/themeswitchertool/" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function(){
    //hides everything
    $("#infocontent *").hide();

    //now we show them by which they click on
    $("#linkjoedhit").click(function(event){
      $("#infocontent *").hide();
      $("#infojoedhit").toggle();
      return false;
    });

    $("#linkgarykhit").click(function(event){
          $("#infocontent *").hide();
      $("#infogarykhit").toggle();
      return false;
    });

});
</script>
       
      <style>
.xx { width: 240px; height: 135px; padding: 0.4em; position: relative; background-color:#FF0000 }
      </style>
   </head>
   <body>
   
<a id="linkjoedhit" href="">Joe</a><br/>
<a id="linkgarykhit" href="">Gary</a>


<div id="infocontent">
    <div id="infojoedhit" class="xx">Information about Joe</div>
    <div id="infogarykhit" class="xx">Information about Gary</div>
</div>
       
</body>
</html>


However, i want to add a jquery effect (drop effect) - which i know can be done [see here: http://jqueryui.com/demos/toggle/ ]. To do this i tried:

<script type="text/javascript">
        $(document).ready(function(){
    //hides everything
    $("#infocontent *").hide();

    //now we show them by which they click on
    $("#linkjoedhit").click(function(event){
      $("#infocontent *").hide();
      $("#infojoedhit").toggle(drop);
      return false;
    });

    $("#linkgarykhit").click(function(event){
          $("#infocontent *").hide();
      $("#infogarykhit").toggle(drop);
      return false;
    });

});
</script>


Unfortunatly this didn't work. Can anybody help me to get it working?

Thanks loads in advance

[ps i have left the javascript refs in the code above so you can see what im using - it should all be fine its the same as being used on the example page i cited][/code]