title: Collapsable Div script. Code not working for multiple divs
body: <p>Wondering, how would I make my code work for multiple collapsable divs without having to create additional instances of the same CSS/JS code? </p>
  
  <p>So far I only managed to make it work for 1 div. Im still new to JS and I love to learn new techniques. </p>
  
  <p>I would be happy to hear some feedback.</p>
  
  <pre><code>&lt;input type="button" onclick="growDiv()" value="Read more" id="more-button"&gt;
  &lt;div id='grow'&gt;
      &lt;div class='measuringWrapper'&gt;
          &lt;div class="text"&gt;Testing Collapse Testing Collapse Testing Collapse Testing Collapse Testing Collapse Testing Collapse v Testing Collapse Testing Collapse&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function growDiv() {
      var growDiv = document.getElementById('grow');
      if (growDiv.clientHeight) {
          growDiv.style.height = 0;
      } else {
          var wrapper = document.querySelector('.measuringWrapper');
          growDiv.style.height = wrapper.clientHeight + "px";
      }
      document.getElementById("more-button").value = document.getElementById("more-button").value == 'Read more' ? 'Read less' : 'Read more';
  }
  </code></pre>
  
  <p>Here is my JSfiddle</p>
  
  <p><a href="http://jsfiddle.net/kGs7Q/1/" rel="nofollow">http://jsfiddle.net/kGs7Q/1/</a></p>