trouble with toggle and ID: need wing nut answer :D

trouble with toggle and ID: need wing nut answer :D

I am having trouble getting a script working where I want to display one div, and hide other divs with the same class.. I'm able to hide the divs, but not display the one referenced... here is the code:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          Toggle Test
        </title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function() {
            $('.toggle').hide();
            $('.toggler').click(
           
            function() {
              var target = $(this) + '_content';
              // Use ID-selectors to toggle a single element.
              $(this).parent().find('.toggle').slideUp(),
              $('#' + target).slideDown();
             
              // Use class-selectors to toggle groups of elements.
              $('.' + target).slideToggle('fast');
              $('.toggle.always').slideToggle('fast');
            });
            $('#toggle_everything').click( function() { $('.toggle').slideToggle('fast'); } );
        });
        //]]></script>
      </head>
     
      <body>
      <div>
         

        <div class="toggler" id="toggle1"><img/>Toggle 1</div>
        <div class="toggler" id="toggle2"><img/>Toggle 2</div>
        <div class="toggler" id="toggle3"><img/>Toggle 3</div>
        <div id="toggle_everything"><img/>Toggle Everything</div>
        <hr/>
        <div class="toggle" id="toggle1_content">toggle1</div>
        <div class="toggle" id="toggle2_content">toggle2</div>
        <div class="toggle" id="toggle3_content">toggle3</div>

      </div>

      </body>
    </html>