title: Show/hide div with javascript
body: <p>I have a menu which should show the sub-elements organised in a div when clicked.</p>
  
  <p>I provide below the structure of the html</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 showOrHide() {
    if (window.innerWidth &lt; 800) {
  
      var div = document.getElementById("links");
      if (div.style.display == "block") {
        div.style.display = "none";
      } else {
        div.style.display = "block";
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li&gt;
    &lt;div id="image" onclick="showOrHide()"&gt;
      &lt;span&gt;Test1&lt;/span&gt;
    &lt;/div&gt;
    &lt;div id="links"&gt;
      &lt;span&gt;Test2&lt;/span&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div id="image" onclick=" showOrHide()"&gt;
      &lt;span&gt;Test3&lt;/span&gt;
    &lt;/div&gt;
    &lt;div id="links"&gt;
      &lt;span&gt;Test4&lt;/span&gt;
    &lt;/div&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like the div <code>id="links"</code> to be shown or hidden when I click on div <code>id="image"</code>. I have the following javascript.</p>
  
  <p>The problem that I face is that onclick javascript is showing all the divs <code>id=links</code> in the menu and I would like only the div links next to the div image to be shown. Example when I click on <code>Test1</code> only <code>Test2</code> should be shown.</p>