title: Show div when radio button checked vanilla js
body: <p>A bit of a struggle here. My eventlistener only detects the "checked" change of my radio button, not the "unchecked" change. Note: Pure javascript (vanillajs) only, no jQuery.</p>
  
  <p>A little JSFiddle to explain my problem: <a href="https://jsfiddle.net/kLuba37w/1/" rel="nofollow">https://jsfiddle.net/kLuba37w/1/</a></p>
  
  <pre><code>&lt;label class="checkbox checkbox--block"&gt;
      &lt;input type="radio" name="radio" class="" data-show-more data-target="showmoretarget2" value="1"&gt; &lt;span&gt;&lt;/span&gt; This is the first radio
  &lt;/label&gt;
  &lt;label class="checkbox checkbox--block"&gt;
      &lt;input type="radio" name="radio" class="" value="2"&gt; &lt;span&gt;&lt;/span&gt; This is the second radio
  &lt;/label&gt;
  
  &lt;div class="js-show-more" data-hook="showmoretarget2"&gt;
      &lt;h2 class="h2"&gt; Some more content&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum repellendus, officia dolores consectetur. Error at officiis sequi iure earum.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>(function() {
   "use strict";
  
    var elements = document.querySelectorAll('[data-show-more]');
  
    [].forEach.call(elements, function(element) {
  
        element.addEventListener('change', function(e) {
          e.preventDefault();
  
          var target = document.querySelectorAll('[data-hook="' + this.getAttribute('data-target') + '"]')[0];
          alert("change detected");
  
  
    }, false);
  
    });
  
   })();
  </code></pre>