title: Hide/show toggle separate divs with the same class name
body: <p>I've got a UL list, each LI has a hidden DIV, and a "More info" link that shows the hidden DIV.
  However, clicking this button shows all the other LI's hidden DIVs as well.</p>
  
  <p>How can I only hide/show the DIV in the LI, and not have all the other hidden DIV's show?</p>
  
  <p>And if I click on one how can I hide the others? I'd like to keep this part separate though in case I want to remove it later.</p>
  
  <p>Also on click I want the text in the "More info" link to change to "Hide".</p>
  
  <p>Here's my current script:</p>
  
  <pre><code>$(window).load(function() {
  
  $('.grey_button a').toggle(function() {
      $('.job_description').slideDown('');
      return false;
    },
      function() {
        $('.job_description').slideUp('');
      return false;
    });
  
  });
  </code></pre>