title: JQuery does not hide div if p element is before it?
body: <p>I am trying to make use of a JQuery snippet to hide some content on SharePoint. It works without the <code>&lt;p&gt;</code> element, but SharePoint has a lot of stuff in between the <code>div</code> so I think that's why it's not working.</p>
  
  <p>JQuery:</p>
  
  <pre><code>jQuery(document).ready(function() {
  jQuery(".ms-wpcontentdivspace").hide();
  //toggle the componenet with class msg_body
  jQuery(".ms-webpart-chrome-title").click(function(e)
   {
     e.preventDefault();
     jQuery(this).next("div.ms-wpcontentdivspace").slideToggle(200);
   });
  });
  </code></pre>
  
  <p>Here's the working code:</p>
  
  <pre><code>&lt;div class="ms-webpart-chrome-title"&gt;&lt;h2&gt;&lt;a href="http://google.com"&gt;&lt;span&gt;Hello&lt;/span&gt;      &lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;
  &lt;div class="ms-wpcontentdivspace"&gt;Hi there. I am hidden&lt;/div&gt;
  &lt;div class="ms-webpart-chrome-title"&gt;&lt;h2&gt;Another title&lt;/h2&gt;&lt;/div&gt;
  &lt;div class="ms-wpcontentdivspace"&gt;More hidden stuff&lt;/div&gt;
  </code></pre>
  
  <p>Here's the code that doesn't:</p>
  
  <pre><code>&lt;div class="ms-webpart-chrome-title"&gt;&lt;h2&gt;&lt;a href="http://google.com"&gt;&lt;span&gt;Hello&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;
  &lt;p&gt;some text&lt;/p&gt;
  &lt;div class="ms-wpcontentdivspace"&gt;Hi there. I am hidden&lt;/div&gt;
  &lt;div class="ms-webpart-chrome-title"&gt;&lt;h2&gt;Another title&lt;/h2&gt;&lt;/div&gt;
  &lt;div class="ms-wpcontentdivspace"&gt;More hidden stuff&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/QkrxQ/" rel="nofollow">Here's a Jsfiddle</a>. Thanks!</p>