title: unable to select "next" when selector wrapped in tags
body: <p>I can't find a way to select elements when the selector is wrapped in an html tag. </p>
  
  <p>The jQuery works fine but as soon as the selector is wrapped in an html tag (any tag) the onclick function doesn't trigger an event or function.</p>
  
  <p>Just some sample code (and codepen below):</p>
  
  <p>HTML:</p>
  
  <pre><code>OK: The &lt;a class="collapse one"&gt;first link&lt;/a&gt; and a &lt;button class="collapse two"&gt;button&lt;/button&gt; both open one and two, and &lt;button class="collapse three"&gt;another button&lt;/button&gt; opens just the first.
  &lt;p class="collapsible one"&gt;Collapse one via link&lt;/p&gt;
  &lt;p class="collapsible two"&gt;Collapse two via button&lt;/p&gt;
  &lt;hr /&gt;
  NOT OK: The same but the line is now wrapped in &amp;lt;em&gt; tags, (but same for &amp;lt;p&gt; tags, &amp;lt;div&gt; tags etc.),&lt;br /&gt;
  &lt;em&gt;The &lt;a class="collapse one"&gt;first link&lt;/a&gt; and a &lt;button class="collapse two"&gt;button&lt;/button&gt; both open one and two, and &lt;button class="collapse three"&gt;another button&lt;/button&gt; opens just the first.&lt;/em&gt;
  &lt;p class="collapsible one"&gt;Collapse one via link&lt;/p&gt;
  &lt;p class="collapsible two"&gt;Collapse two via button&lt;/p&gt;
  </code></pre>
  
  <p>jQUERY:</p>
  
  <pre><code>jQuery(document).ready(function($){
      $('.collapse.one, .collapse.two').click(function() {
          $(this).nextAll('.collapsible.one, .collapsible.two').slideToggle();
      }).nextAll('.collapsible.one, .collapsible.two').hide();
  
      $('.three').click(function() {
          $(this).next().slideToggle();
      }).next().hide();
  });
  </code></pre>
  
  <p>See this codepen with sample code: <a href="https://codepen.io/cnxpat/pen/MWgBYNz" rel="nofollow noreferrer">https://codepen.io/cnxpat/pen/MWgBYNz</a></p>
  
  <p>Thanks in advance for any assistance, I have been struggling with this for quite a few days.</p>