title: Simplify class manipulation on elements by using selectors instead of ID targeting
body: <p>In the example below, how can I generically target <em>description detail</em> <code>&lt;dd&gt;</code> below its <em>description term</em> <code>&lt;dt&gt;</code>, and toggle class on targeted <code>&lt;dd&gt;</code> and <code>&lt;button&gt;</code>, without using IDs.</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>document.addEventListener('DOMContentLoaded', function() {
   [].forEach.call(document.querySelectorAll('button'), function(el) {
    el.addEventListener('click', function(e) {
     if (e.target.nodeName.toLowerCase() == 'a') {
      e.preventDefault();
     }
     e.target.classList.toggle('active');
    });
   });
   document.getElementById('expand-aluminum').addEventListener('click', function(e) {
     if (e.target.nodeName.toLowerCase() == 'a') {
      e.preventDefault();
     }
     document.getElementById('aluminum-definition').classList.toggle('open');
   });
   document.getElementById('expand-silver').addEventListener('click', function(e) {
     if (e.target.nodeName.toLowerCase() == 'a') {
      e.preventDefault();
     }
     document.getElementById('silver-definition').classList.toggle('open');
   });
   document.getElementById('expand-gold').addEventListener('click', function(e) {
     if (e.target.nodeName.toLowerCase() == 'a') {
      e.preventDefault();
     }
     document.getElementById('gold-definition').classList.toggle('open');
   });
   document.getElementById('expand-platinum').addEventListener('click', function(e) {
     if (e.target.nodeName.toLowerCase() == 'a') {
      e.preventDefault();
     }
     document.getElementById('platinum-definition').classList.toggle('open');
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>dd { visibility: hidden }
  .open { visibility: visible }
  .active { color: blue }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dl&gt;
  &lt;dt&gt;aluminum
  &lt;button type=button id=expand-aluminum&gt;&lt;abbr title="See Definition"&gt;&lt;i&gt;i&lt;/i&gt;&lt;/abbr&gt;&lt;/button&gt;
  &lt;dd id=aluminum-definition&gt;the chemical element of atomic number 13, a light silvery-grey metal.
  
  &lt;dt&gt;silver
  &lt;button type=button id=expand-silver&gt;&lt;abbr title="See Definition"&gt;&lt;i&gt;i&lt;/i&gt;&lt;/abbr&gt;&lt;/button&gt;
  &lt;dd id=silver-definition&gt;a precious shiny greyish-white metal, the chemical element of atomic number 47.
  
  &lt;dt&gt;gold
  &lt;button type=button id=expand-gold&gt;&lt;abbr title="See Definition"&gt;&lt;i&gt;i&lt;/i&gt;&lt;/abbr&gt;&lt;/button&gt;
  &lt;dd id=gold-definition&gt;a yellow precious metal, the chemical element of atomic number 79.
  
  &lt;dt&gt;platinum
  &lt;button type=button id=expand-platinum&gt;&lt;abbr title="See Definition"&gt;&lt;i&gt;i&lt;/i&gt;&lt;/abbr&gt;&lt;/button&gt;
  &lt;dd id=platinum-definition&gt;a precious silvery-white metal, the chemical element of atomic number 78.
  &lt;/dl&gt;</code></pre>
  </div>
  </div>
  </p>