title: parent().children() and toggle not working
body: <p>I have the following HTML: </p>
  
  <pre><code>&lt;div class="connections"&gt;
      &lt;h2&gt;Grads that share your interests&lt;/h2&gt;
          &lt;div id="connections_nav" class="collapse"&gt;
              &lt;ul&gt;
              &lt;li&gt;&lt;h3&gt;&lt;a href=""&gt;Sally Struthers &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Class of 2008&lt;/p&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;h3&gt;&lt;a href=""&gt;Sally Struthers &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Class of 2008&lt;/p&gt;
                                  &lt;/li&gt;
              &lt;li&gt;&lt;h3&gt;&lt;a href=""&gt;Sally Struthers &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;Class of 2008&lt;/p&gt;
                                  &lt;/li&gt; 
              &lt;/ul&gt;
          &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>And the following CSS: </p>
  
  <pre><code>.connections h2 {
      background-image: url(images/show.gif);
      background-position: 0px;
      background-repeat: no-repeat;
      color: #660a11;
      font-size: 13px;
      font-weight: bold;
      margin: 0px 0px .4em;
      padding: 0px 0px 0px 25px; }
  
  .connections .hide h2 {
      background-image: url(images/hide.gif);
      background-position: 0px;
      background-repeat: no-repeat; }
  
  .connections h2.over {
      background-image: url(images/hover-show.gif);
      background-position: 0px;
      background-repeat: no-repeat; }
  
  .connections .hide h2.over {
      background-image: url(images/hover-hide.gif);
      background-position: 0px;
      background-repeat: no-repeat; }
  </code></pre>
  
  <p>With the following jQuery: </p>
  
  <pre><code>$(document).ready(function() {
  
  $('.connections h2').click(function() {
      $(this).parent().children('.collapse').toggle('slow');
      $(this).toggleClass('hide');
  });
  
  $('.connections h2').hover( 
      function() {
          $(this).toggleClass('over');
        },
        function () {
          $(this).toggleClass('over');
  });
  </code></pre>
  
  <p>});</p>
  
  <p>What happens is the entire div disappears. When I take out the <code>$(this).toggleClass('hide');</code> code, the collapse div properly collapses (but the 'hide' class which shows a closed triangle image isn't applied, obviously). Why is that? </p>