title: JavaScript: Load Images in a div after clicking a button
body: <p>I have a hidden div (by using max-height and transition) that show up when I click a button. This div contains several images that load up when you first load the site. I would like them to load when I click the button to show the div, to make the site lighter.</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;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      .class1 {
        max-height:0px;
        transition:max-height 1s;
        overflow:hidden;
      }
    &lt;/style&gt;
    &lt;script&gt;
      function show() {
        document.getElementById('id1').style.maxHeight = "200px";
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button onclick="show()"&gt;Show Images&lt;/button&gt;
    &lt;hr&gt;
   
    &lt;div id="id1" class="class1"&gt;
      &lt;img src="img1.jpg" alt=""&gt;
      &lt;img src="img2.jpg" alt=""&gt;
      &lt;img src="img3.jpg" alt=""&gt;
      &lt;img src="img4.jpg" alt=""&gt;
    &lt;/div&gt;
   
    &lt;hr&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>