title: Show more / show less with jQuery
body: <p>So I have a webpage at which I have written an addon that allows customers to buy additional products, but I do not want all these products to be shown whenever they enter the page. So I am looking for some kind of "show more" </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;"&gt;Product 1&lt;/div&gt;
  &lt;div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;"&gt;Product 2&lt;/div&gt;
  &lt;div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;"&gt;Product 3&lt;/div&gt;
  &lt;div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;"&gt;Product 4&lt;/div&gt;
  &lt;div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;"&gt;Product 5&lt;/div&gt;
  &lt;div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;"&gt;Product 6&lt;/div&gt;
  &lt;/div&gt;     </code></pre>
  </div>
  </div>
  </p>
  
  <p>So I am looking for some kind of way to only show 3 products whenever you enter the page but if you press the show more button it will show the next 3 products.</p>
  
  <p>I have seen many posts on this but I can not find anything related to this.</p>
  
  <p>Ps. If there could be an animation when you press "show more", then that'd be great.</p>