title: Load More Button Using jQuery
body: <p>I have 3 rows of 4 images, each in its own div. I want the first 2 rows to be shown on page load but the 3rd row to show when clicking the 'load more' button. A row of divs is set up like so:</p>
  
  <pre><code>&lt;div class="w3-content w3-container w3-padding-64"&gt;
  
  //First row of images
    &lt;div class="w3-row-padding w3-center portfolioImgs"&gt;
      &lt;div class="w3-col m3"&gt;
        &lt;img src="images/projects/houston.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity""&gt;
      &lt;/div&gt;
  
      &lt;div class="w3-col m3"&gt;
        &lt;img src="images/projects/sugarland.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"&gt;
      &lt;/div&gt;
  
      &lt;div class="w3-col m3"&gt;
        &lt;img src="images/projects/stevenson.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"&gt;
      &lt;/div&gt;
  
      &lt;div class="w3-col m3"&gt;
        &lt;img src="images/projects/phoenix.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    .
    .
    .
    //Second row of images
    &lt;div class="w3-row-padding w3-center portfolioImgs"&gt;
    .
    .
    .
  &lt;/div&gt;
  
  //load more button
  &lt;a href="#" id="loadmore" class="w3-row w3-button w3-padding-large w3-light-grey" style="margin-top:64px"&gt;LOAD MORE&lt;/a&gt;
  </code></pre>
  
  <p>I've tried many methods with jQuery to load the 3rd row of divs on click but wondering if it's because i'm trying to load the divs and not the imgs directly?</p>