title: Uncaught TypeError: Cannot read property 'display' of undefined
body: <p>I'm trying to show and hide several divs based on which button  is clicked but nothing happens and in the Chrome Inspector I get the error: "Uncaught TypeError: Cannot read property 'display' of undefined"</p>
  
  <p>Thanks in advance!</p>
  
  <p>Triggers and block:</p>
  
  <pre><code>echo '&lt;button class="more" onClick="toggleLyrics()"&gt;Show lyrics &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/button&gt;';
  echo '&lt;div class="lyricsBox" style="display: block;"&gt;&lt;pre&gt;' . $row['lyrics'] .'&lt;/pre&gt;&lt;/div&gt;';
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>&lt;script&gt;
  function toggleLyrics(){
  var lyricsMore = document.getElementsByClassName('more');
  var lyricsBox = document.getElementsByClassName("lyricsBox");
  
  var displaySetting = lyricsBox.style.display;
  
  if (displaySetting == 'block') { 
    lyricsBox.style.display = 'none';
  }
  else { 
    lyricsBox.style.display = 'block';
  }
  }
  &lt;/script&gt;
  </code></pre>