title: onClick action to show more information html, css, javascript
body: <p>I have created html and css that looks something like this:
  <a href="https://jsfiddle.net/jw7pfb1w/" rel="nofollow noreferrer">https://jsfiddle.net/jw7pfb1w/</a></p>
  
  <p>As you can see, I made those boxes 300px in height, but I have more information, that is hidden with <code>overflow: hidden;</code>. Now I created a button</p>
  
  <pre><code>//html
  &lt;a id="show-more" class="show"&gt;Show More&lt;/a&gt;
  
  /css
  .show {
  display: block;
  background-color: #75868E;
  width: 100px;
  font-size: 12px;
  text-transform: uppercase;
  display: inline-block;
  margin: 20px auto;
  cursor: pointer;
  height: 15px;
  padding: 10px 0; 
  }
  </code></pre>
  
  <p>And now I want to see all the information in those three boxes when I click the button. I tried something like this</p>
  
  <p>I added this to css:</p>
  
  <pre><code>#model1.open {
  max-height: 1000px;
  //transitions
  -webkit-transition: max-heigth 0.7s;
  -moz-transition: max-heigth 0.7s;
  transition: max-heigth 0.7s;
  }
  </code></pre>
  
  <p>and this to javascript</p>
  
  <pre><code>var content = document.getElementByClassName(".model1");
  var button = document.getElementById("show-more")
  
  button.onclick = function(){
  
  if(content.className == "open"){
      content.className = "";
      button.innerHTML = "Show More";
  
  } else {
      content.className = "open";
      button.innerHTML = "Show Less";
  }
  
  };
  </code></pre>
  
  <p>But it does'not work. I am stuck. Can someone help me to make this work, please?</p>