title: Jquery Wrap a div around first 5 elements and another div around last elements
body: <p>I have this example code and I would like to hide all the content rows > 5 and add a link to show/hide more.</p>
  
  <pre><code>&lt;div class="wb-allview-cat-cnt wb-col-xs-12 wb-col-sm-12 wb-col-md-3"&gt;
      &lt;div class="wb-row"&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="wb-allview-cat-cnt wb-col-xs-12 wb-col-sm-12 wb-col-md-3"&gt;
      &lt;div class="wb-row"&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="wb-allview-cat-cnt wb-col-xs-12 wb-col-sm-12 wb-col-md-3"&gt;
      &lt;div class="wb-row"&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
          &lt;div class="wb-col-md-12"&gt;Content&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried this but it's not working, kind of got stuck here</p>
  
  <pre><code>$('.wb-row &gt; div:lt(5)').wrapAll('&lt;div class="first5"&gt;&lt;/div&gt;');
  </code></pre>