JSFiddle - React, Tailwind, and code Playground

HTML

<label class="checkbox checkbox--block">
		<input type="radio" name="radio" class="" data-show-more data-target="showmoretarget2" value="1"> <span></span> This is the first radio
	</label>
	<label class="checkbox checkbox--block">
		<input type="radio" name="radio" class="" value="2"> <span></span> This is the second radio
	</label>

	<div class="js-show-more" data-hook="showmoretarget2">
		<h2 class="h2">	Some more content</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum repellendus, officia dolores consectetur. Error at officiis sequi iure earum.</p>
	</div>

SCSS

// Show more div
.js-show-more{
	display: none;

	&--open{
		display: block;
	}
}

JavaScript

(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);

      });
      
})();