title: Javascript: select next sibling of an element and change its class by click (without using ID´s)
body: <p>I want to add a <code>CSS</code> class name to the next sibling of an element as soon as I click on it to get a simple show/hide effect</p>
  
  <p>I have the following html output and I don't have element-ID's.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="news-message"&gt;
    &lt;div class="message-head"&gt; Headline of Message 1 &lt;/div&gt;
    &lt;div class="message-content"&gt; Here comes the content of message 1 &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="news-message"&gt;
    &lt;div class="message-head"&gt; Headline of Message 2 &lt;/div&gt;
    &lt;div class="message-content"&gt; Here comes the content of message 2 &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="news-message"&gt;
    &lt;div class="message-head"&gt; Headline of Message 3 &lt;/div&gt;
    &lt;div class="message-content"&gt; Here comes the content of message 3 &lt;/div&gt;
  &lt;/div&gt;
  
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I want to hide the message-content and just display the headline (easy to realize with <code>display: none</code>).</p>
  
  <p>As soon as I click on the headline, I want the content of that specific message to be displayed.</p>
  
  <p>So my idea was to add a <code>CSS</code> class "visible" to the <code>DIV</code> "message-content" by click on message-head and remove it by another click.</p>
  
  <p>So I added a "onClick="changeClass()" to the "pm-head" Element and the following javascript</p>
  
  <pre><code>function changeClass() {
    var hidecontent = document.querySelectorAll('.message-content');
    var i;
    for (i = 0; i &lt; hidecontent.length; i++) {
      hidecontent[i].classList.toggle('visible');      }    }
  </code></pre>
  
  <p>but this adds the class visible to all "message-content" divs on that page while I just need it to be added to the next sibling of the "pm-head" element on which I have clicked.</p>
  
  <p>And I can´t use jquery or other frameworks/libraries on this one.</p>
  
  <p>Sorry, I am new to javascript, probably an easy to answer question.</p>
  
  <p>Thanks
  John</p>