title: How to target the next <div> element?
body: <p>When I click on the hyperlink <code>&lt;a&gt;</code> it will open the content of the <code>&lt;div&gt;</code> that goes just after it. Right now I am adding ids to the <code>&lt;a&gt;</code> and the <code>&lt;div&gt;</code> to target them. But how I make this more efficient? My idea is to use a script which will search for the next <code>&lt;div&gt;</code>. This would avoid declaring ids.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function open_content(y) {
      x=y.substr(-3,3)
      console.log(x);
      if (document.getElementById('content'+x).style.display=='none'){
          document.getElementById('click'+x).innerHTML="CLOSE";
          document.getElementById('content'+x).style.display='block';
      } else {
          document.getElementById('click'+x).innerHTML="SHOW";
          document.getElementById('content'+x).style.display='none';
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
      cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;CONTENT TITLE&lt;/h2&gt;
  &lt;p&gt;&lt;a id="click100" onClick="open_content(this.id)"&gt;SHOW&lt;/a&gt;&lt;/p&gt;
  &lt;div id="content100" class="content" style="display:none;"&gt;
      &lt;div&gt; 
          &lt;h3&gt;Sub Title&lt;/h3&gt;
          &lt;p&gt;&lt;a id="click101" onClick="open_content(this.id)"&gt;SHOW&lt;/a&gt;&lt;/p&gt;
          &lt;div id="content101" style="display:none;"&gt;
              &lt;p&gt;Place content here&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>