title: Displaying show/hide content with a button and an .active css class
body: <p>I am trying to create a testimonial section on a wordpress site where there is an "expand" button to show the full testimonial quote. I want the text in the button to change to "collapse" after it is clicked. I also need to add a class to the div wraper so I can implement custom css styling when the button is active. I need this pasted three times. The problem is it fails after the first testimonial.</p>
  
  <p>I have this working with the code below, with it duplicated three times (for three different testimonials) and it works on a basic html document. But when I implement it in a wordpress site by pasting the code, only the first testimonial totally works. The other two do show/hide my inner div element, but they won't insert the .active class or change the text of the button to "collapse"</p>
  
  <p>Both of the second testimonials give a </p>
  
  <p><strong><em>"Uncaught TypeError: Cannot set property 'innerHTML' of null"</em></strong> in the console.</p>
  
  <p>So for example, here are two out of three of my testimonials I want to show. I have to change the ID's on them to avoid the javascript conflict.</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-js lang-js prettyprint-override"><code>function showhide() {
    var content = document.getElementById('hidden-content');
    var wrap = document.getElementById('testimonial-wrap');
    var btn = document.getElementById('button1');
  
    if (content.style.display === 'none') {
      content.style.display = 'block';
      wrap.style.background = 'grey';
      btn.innerHTML = 'COLLAPSE';
      wrap.classList.add('active');
    } else {
      content.style.display = 'none';
      wrap.style.background = 'white';
      btn.innerHTML = 'EXPAND';
      wrap.classList.remove('active');
    }
  }
  
  function showhide2() {
    var content2 = document.getElementById('hidden-content2');
    var wrap2 = document.getElementById('testimonial-wrap2');
    var btn2 = document.getElementById('button2');
  
    if (content2.style.display === 'none') {
      content2.style.display = 'block';
      wrap2.style.background = 'grey';
      btn2.innerHTML = 'COLLAPSE';
      wrap2.classList.add('active');
    } else {
      content2.style.display = 'none';
      wrap2.style.background = 'white';
      btn2.innerHTML = 'EXPAND';
      wrap2.classList.remove('active');
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="testimonial-wrap" style="background-color: white;"&gt;
    &lt;div id="testimonial"&gt;
      above testimonial content
      &lt;div id="hidden-content" style="display: none;"&gt;
        &lt;p&gt;"hidden content”&lt;/p&gt;
      &lt;/div&gt;
      &lt;button id="button1" onclick="showhide()"&gt;EXPAND&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="testimonial-wrap2" style="background-color: white;"&gt;
    &lt;div id="testimonial"&gt;
      above testimonial content
      &lt;div id="hidden-content2" style="display: none;"&gt;
        &lt;p&gt;"hidden content.”&lt;/p&gt;
      &lt;/div&gt;
      &lt;button id="button2" onclick="showhide2()"&gt;EXPAND&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>