title: jquery - Collapsing / Expanding divs?
body: <p>Trying to create collapsible / expandable divs using jQuery, but it's not working for me at all...  Each h3 should expand/collapse the div beneath it, and I'm not sure why this isn't working...  Granted,  <em>is</em> a heavily nested div, but I thought that the script below would find the uforms class regardless of how much other markup is on the page when it loads and then do what it's supposed to do... </p>
  
  <p>Here's the jquery: </p>
  
  <pre><code>$(document).ready(function () {
          $('div.uforms:eq(1)&gt; div:gt(-1)').hide();
          $('div.uforms:eq(1)&gt; h3').click(function() {
                  $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast');
          });
  });
  </code></pre>
  
  <p>And, the markup (minus all the stuff that's actually inside the <code>&lt;div&gt;&lt;/div&gt;</code>, because it's a lot of form stuff...) </p>
  
  <pre><code>&lt;div class="uforms"&gt;
    &lt;h3&gt;Heading&lt;/h3&gt;
    &lt;div&gt;&lt;/div&gt;
  
    &lt;h3&gt;Heading&lt;/h3&gt;
    &lt;div&gt;&lt;/div&gt;
  
    &lt;h3&gt;Heading&lt;/h3&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>