JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<div class="content_container_woordenschat_onderdeel">
	<p>
		<input id='show_niveau' name='onderdeel' type='radio' value="spreekwoorden"/> Spreekwoorden<br>
		<input id='show_niveau_button' name='onderdeel' type='radio' value="trappen van vergelijking"/> Trappen van vergelijking<br>
		<input id='show_niveau' name='onderdeel' type='radio' value="synoniemen"/> Synoniemen<br>
		<input id='show_vraagstelling_button' name='onderdeel' type='radio' value="tegenstellingen"/> Tegenstellingen<br>
		<input id='show_groepen' name='onderdeel' type='radio' value="woordenschat"/> Woordenschat
    </p>
</div>


<div id='div_niveau' style='display:none'>
	<div class="content_container_woordenschat">
		<p>
			<input id='show_vraagstelling_button' type="radio" name="niveau" value="1"> Niveau 1
			<br>
			<input id='show_vraagstelling_button' type="radio" name="niveau" value="2"> Niveau 2
			<br>
		</p>		
	</div>
</div>

<div id='div_niveau_button' style='display:none'>
	<div class="content_container_woordenschat">
		<p>
			<input type="radio" name="niveau" value="1"> Niveau 1<br>
			<input type="radio" name="niveau" value="2"> Niveau 2<br>
		</p>		
		<br><br><br />
		<input type="submit" name="button" id="button" value="Submit">
	</div>
</div>

<div id='div_groepen' style='display:none'>
    <div class="content_container_woordenschat">
	    <p>
        <input id='show_vraagstelling' type="radio" name="groepen" value="4" > Groep 4<br>
        <input id='show_vraagstelling' type="radio" name="groepen" value="5" > Groep 5<br>
        <input id='show_vraagstelling' type="radio" name="groepen" value="6" > Groep 6<br>
        <input id='show_vraagstelling' type="radio" name="groepen" value="7" > Groep 7<br>
        <input id='show_vraagstelling' type="radio" name="groepen" value="8" > Groep 8<br>
	    </p>
    </div>
</div>

<div id='div_vraagstelling' style='display:none'>
	<div class="content_container_woordenschat">
		<p>
			<input id='show_onderwerp_button' type="radio"...

CSS

.content_container_woordenschat_main
{
	text-align:center;
	width: 690px;
	float: left;
	padding: 10px;
	margin-top: 5px;
	margin-left: 10px;
	margin-bottom: 10px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}

.content_container_woordenschat
{
	width: 140px;
	height: 422px;
	padding: 10px;
	margin-top: 5px;
	margin-left: 10px;
	margin-bottom: 0px;
	float: left;
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}

.content_container_woordenschat_onderdeel
{
	width: 190px;
	height: 422px;
	padding: 10px;
	margin-top: 5px;
	margin-left: 10px;
	margin-bottom: 0px;
	float: left;
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}

JavaScript

$('input[name=onderdeel]').click(function () {
	if (this.id == "show_groepen") {
        $("#div_groepen").show('slow'); 
    } else {
        $("input[name=groepen]").removeAttr("checked");
        $("#div_groepen").hide('slow'); 
    }
    
	if (this.id == "show_niveau") {
        $("#div_niveau").show('slow'); 
    } else {
        $("input[name=niveau]").removeAttr("checked");
        $("#div_niveau").hide('slow'); 
    }
    
	if (this.id == "show_niveau_button") {
        $("#div_niveau_button").show('slow'); 
    } else {
        $("input[name=niveau_button]").removeAttr("checked");
        $("#div_niveau_button").hide('slow');
    }
    
	if (this.id == "show_vraagstelling_button") {
        $("#div_vraagstelling_button").show('slow'); 
    } else {
        $("input[name=vraagstelling_button]").removeAttr("checked");
        $("#div_vraagstelling_button").hide('slow');
    }
});



$('input[name=niveau]').click(function () {
	if (this.id == "show_vraagstelling") {
        $("#div_vraagstelling").show('slow'); 
    } else {
        $("input[name=vraagstelling]").removeAttr("checked");
        $("#div_vraagstelling").hide('slow');
    }
    
	if (this.id == "show_vraagstelling_button") {
        $("#div_vraagstelling_button").show('slow');
    } else {
        $("input[name=vraagstelling_button]").removeAttr("checked");
        $("#div_vraagstelling_button").hide('slow');
    }
});


$('input[name=vraagstelling]').click(function () {
	if (this.id == "show_onderwerp_button") {
        $("#div_onderwerp_button").show('slow'); 
    } else {
        $("input[name=onderwerp_button]").removeAttr("checked");
        $("#div_onderwerp_button").hide('slow');
    }
});


$('input[name=groepen]').click(function () {
	if (this.id == "show_vraagstelling") { 
        $("#div_vraagstelling").show('slow');
    } else {
        $("input[name=vraagstelling]").removeAttr("checked");
        $("#div_vraagstelling").hide('slow');
    }
});