title: Making element content toggle on h1 header click with pure Javascript
body: <p>I want to make some content toggle when clicking on a h1 header.
  I want to be able to click on the h1 header and make the section under it hide or show.</p>
  
  <p>For the Javascript I'm trying to select all (5) sections, but not the h1, that are all inside a aside element. I can't figure this out either.</p>
  
  <p>Please take a look at my code and let me know what you would do.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;aside&gt;
      &lt;h1&gt;&lt;a href="#"&gt;Title&lt;/a&gt;&lt;/h1&gt;
          &lt;section&gt;
              &lt;h1&gt;Foo&lt;/h1&gt;
              &lt;p&gt;
                  Foo
              &lt;/p&gt;
          &lt;/section&gt;
          &lt;section&gt;
              &lt;h1&gt;Foo&lt;/h1&gt;
              &lt;p&gt;
                  Foo
              &lt;/p&gt;
          &lt;/section&gt;
          &lt;section&gt;
              &lt;h1&gt;Foo&lt;/h1&gt;
              &lt;p&gt;
                  Foo
              &lt;/p&gt;
          &lt;/section&gt;
          &lt;section&gt;
              &lt;h1&gt;Foo&lt;/h1&gt;
              &lt;p&gt;
                  Foo
              &lt;/p&gt;
          &lt;/section&gt;
          &lt;section&gt;
              &lt;h1&gt;Foo&lt;/h1&gt;
              &lt;p&gt;
                  Foo
              &lt;/p&gt;
          &lt;/section&gt;
      &lt;/aside&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    .invisible {
    display: none;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>// select
  var laatste = document.querySelector('aside h1:not(:first-of-type)');
  
  // hide
  laatste.classList.add('invisible');
  
  // toggle 
  document.querySelector('aside &gt; h1').onclick = function() {
    if (laatste.className === "invisible") {
      laatste.classList.remove('invisible');
    }
    else {
      laatste.classList.add('invisible');
    }
  }
  </code></pre>
  
  <p>I'm not allowed to use jQuery and add classes or divs to my HTML.</p>