Show/hide multiple divs independently...

Show/hide multiple divs independently...

Is there a way I can simplify my code below? I want to be able to have just one iteration of the code and have it automatically switch out the IDs without have to add a new bit of JavaScript with each new div that is added.

Here's my Javascript:

  1. $(document).ready(function() {
  2.        // toggles the personnel window on clicking the image/header 
  3.             $('div.title'+'#one').click(function() {
  4.                 $('div.content'+'#one').toggle(300);
  5.                 return false;
  6.             });
  7.            
  8.             $('div.title'+'#two').click(function() {
  9.                 $('div.content'+'#two').toggle(400);
  10.                 return false;
  11.             });
  12.            
  13.             $('div.title'+'#three').click(function() {
  14.                 $('div.content'+'#three').toggle(400);
  15.                 return false;
  16.             });
  17.            
  18.             $('div.title'+'#four').click(function() {
  19.                 $('div.content'+'#four').toggle(400);
  20.                 return false;
  21.             });
  22.            
  23.             $('div.title'+'#five').click(function() {
  24.                 $('div.content'+'#five').toggle(400);
  25.                 return false;
  26.             });
  27.            
  28.             $('div.title'+'#six').click(function() {
  29.                 $('div.content'+'#six').toggle(400);
  30.                 return false;
  31.             });
  32.            
  33.             $('div.title'+'#seven').click(function() {
  34.                 $('div.content'+'#seven').toggle(400);
  35.                 return false;
  36.             });
  37.         });
Here's the HTML

  1. <div id="content">
  2.         <div class="personnel">
  3.             <div class="title" id="one">
  4.                 <h1>William Guido, PH.D.</h1>
  5.                 <img src="img/wguido.jpg" alt="Dr. Bill Guido" />
  6.             </div>
  7.             <div class="content" id="one">
  8.                 <ul>
  9.                     <li>
  10.                         <span>Education:</span>
  11.                         <ul class="education">
  12.                             <li>BS - University of Florida Dept of Psychology, 1977</li>
  13.                             <li>MS - University North Carolina-Greensboro Dept of Psychology, 1982</li>
  14.                             <li>PhD - University North Carolina-Greensboro Dept of Psychology, 1985</li>
  15.                         </ul>
  16.                     </li>
  17.                     <li>
  18.                         <span>Bio:</span>
  19.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna sapien, ornare tempus justo. Pellentesque sollicitudin tellus in nulla pretium eget pulvinar arcu vehicula. Sed sagittis arcu nec sapien tempor sit amet pretium neque varius. Aliquam tincidunt tristique est dictum faucibus.</p>
  20.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna sapien, ornare tempus justo. Pellentesque sollicitudin tellus in nulla pretium eget pulvinar arcu vehicula. Sed sagittis arcu nec sapien tempor sit amet pretium neque varius. Aliquam tincidunt tristique est dictum faucibus.</p>
  21.                     </li>
  22.                 </ul>
  23.             </div>
  24.         </div>
  25.        
  26.         <div class="personnel">
  27.             <div class="title" id="two">
  28.                 <h1>Thomas Krahe</h1>
  29.                 <img src="img/mugshot.jpg" alt="Mugshot" width="30" height="198" />
  30.             </div>
  31.             <div class="content" id="two">
  32.                 <ul>
  33.                     <li>
  34.                         <span>Education:</span>
  35.                         <ul class="education">
  36.                             <li>BS - University of Florida Dept of Psychology, 1977</li>
  37.                             <li>MS - University North Carolina-Greensboro Dept of Psychology, 1982</li>
  38.                             <li>PhD - University North Carolina-Greensboro Dept of Psychology, 1985</li>
  39.                         </ul>
  40.                     </li>
  41.                     <li>
  42.                         <span>Bio:</span>
  43.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna sapien, ornare tempus justo. Pellentesque sollicitudin tellus in nulla pretium eget pulvinar arcu vehicula. Sed sagittis arcu nec sapien tempor sit amet pretium neque varius. Aliquam tincidunt tristique est dictum faucibus.</p>
  44.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna sapien, ornare tempus justo. Pellentesque sollicitudin tellus in nulla pretium eget pulvinar arcu vehicula. Sed sagittis arcu nec sapien tempor sit amet pretium neque varius. Aliquam tincidunt tristique est dictum faucibus.</p>
  45.                     </li>
  46.                 </ul>
  47.             </div>
  48.         </div>
  49.        
  50.         <div class="personnel">
  51.             <div class="title" id="three">
  52.                   <h1>Emily Dilger</h1>
  53.                 <img src="img/mugshot.jpg" alt="Mugshot" width="30" height="198" />
  54.             </div>
  55.             <div class="content" id="three">
  56.                 <ul>
  57.                     <li>
  58.                         <span>Education:</span>
  59.                         <ul class="education">
  60.                             <li>BS - University of Florida Dept of Psychology, 1977</li>
  61.                             <li>MS - University North Carolina-Greensboro Dept of Psychology, 1982</li>
  62.                             <li>PhD - University North Carolina-Greensboro Dept of Psychology, 1985</li>
  63.                         </ul>
  64.                     </li>
  65.                     <li>
  66.                         <span>Bio:</span>
  67.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna sapien, ornare tempus justo. Pellentesque sollicitudin tellus in nulla pretium eget pulvinar arcu vehicula. Sed sagittis arcu nec sapien tempor sit amet pretium neque varius. Aliquam tincidunt tristique est dictum faucibus.</p>
  68.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna sapien, ornare tempus justo. Pellentesque sollicitudin tellus in nulla pretium eget pulvinar arcu vehicula. Sed sagittis arcu nec sapien tempor sit amet pretium neque varius. Aliquam tincidunt tristique est dictum faucibus.</p>
  69.                     </li>
  70.                 </ul>
  71.             </div>
  72.         </div>
  73.        
  74.         <div class="personnel">
  75.             <div class="title" id="four">
  76.                 <h1>Rana Eldanaf</h1>
  77.                 <img src="img/mugshot.jpg" alt="Mugshot" width="30" height="198" />
  78.             </div>
  79.             <div class="content" id="four">
  80.                 <ul>
  81.                     <li>
  82.                         <span>Education:</span>
  83.                         <ul class="education">
  84.                             <li>BS - University of Florida Dept of Psychology, 1977</li>
  85.                             <li>MS - University North Carolina-Greensboro Dept of Psychology, 1982</li>
  86.                             <li>PhD - University North Carolina-Greensboro Dept of Psychology, 1985</li>
  87.                         </ul>
  88.                     </li>
  89.                     <li>
  90.                         <span>Bio:</span>
  91.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna sapien, ornare tempus justo. Pellentesque sollicitudin tellus in nulla pretium eget pulvinar arcu vehicula. Sed sagittis arcu nec sapien tempor sit amet pretium neque varius. Aliquam tincidunt tristique est dictum faucibus.</p>
  92.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna sapien, ornare tempus justo. Pellentesque sollicitudin tellus in nulla pretium eget pulvinar arcu vehicula. Sed sagittis arcu nec sapien tempor sit amet pretium neque varius. Aliquam tincidunt tristique est dictum faucibus.</p>
  93.                     </li>
  94.                 </ul>
  95.             </div>
  96.         </div>
  97.        
  98.         <div class="personnel">
  99.             <div class="title" id="five">
  100.                 <h1>Chris Jurgens</h1>
  101.                 <img src="img/mugshot.jpg" alt="Mugshot" width="30" height="198" />
  102.             </div>
  103.             <div class="content" id="five">
  104.                 <ul>
  105.                     <li>
  106.                         <span>Education:</span>
  107.                         <ul class="education">
  108.                             <li>BS - University of Florida Dept of Psychology, 1977</li>
  109.                             <li>MS - University North Carolina-Greensboro Dept of Psychology, 1982</li>
  110.                             <li>PhD - University North Carolina-Greensboro Dept of Psychology, 1985</li>
  111.                         </ul>
  112.                     </li>
  113.                     <li>
  114.                         <span>Bio:</span>
  115.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna sapien, ornare tempus justo. Pellentesque sollicitudin tellus in nulla pretium eget pulvinar arcu vehicula. Sed sagittis arcu nec sapien tempor sit amet pretium neque varius. Aliquam tincidunt tristique est dictum faucibus.</p>
  116.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec urna sapien, ornare tempus justo. Pellentesque sollicitudin tellus in nulla pretium eget pulvinar arcu vehicula. Sed sagittis arcu nec sapien tempor sit amet pretium neque varius. Aliquam tincidunt tristique est dictum faucibus.</p>
  117.                     </li>
  118.                 </ul>
  119.             </div>
  120.         </div>

Thanks!!