title: How to change css display none or block with button click
body: <p>Click the button when the display property changes.</p>
  
  <p>example,
  button class = "1" click results - the first-img class display: block,
  The second-img class display: none, the third-img class display: none.</p>
  
  <p>button class = "2" click results - the first-img class display: none,
  The second-img class display: block, the third-img class display: none.</p>
  
  <p>button class = "3" click results - the first-img class display: none,
  The second-img class display: none, the third-img class display: block.</p>
  
  <p>codepen = <a href="http://codepen.io/soso77/pen/bwkYZX" rel="nofollow">http://codepen.io/soso77/pen/bwkYZX</a></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-css lang-css prettyprint-override"><code>ol,
  ul,
  li {
    list-style: none;
  }
  .slider {
    float: left;
    position: relative;
    width: 980px;
  }
  img.first-img,
  img.second-img,
  img.third-img {
    max-height: 625px;
    display: block;
  }
  img.second-img,
  img.third-img {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-1st" class="first-img" /&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" /&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-3er" class="third-img" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-1st" class="first-img" /&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" /&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-3er" class="third-img" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-1st" class="first-img" /&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" /&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-3er" class="third-img" /&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-1st" class="first-img" /&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" /&gt;
          &lt;img src="http://placehold.it/980x625/?text=image-3er" class="third-img" /&gt;
      &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>