JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="temp">
    <div class="contentBlock">
        regelen met draaiboek
    </div>
</div>
    <br/>     
    <br/>     
<div>
<div class="controls requiredBar">
				 	
    <label class="radio">
        <input type="radio" data-label="Ik regel dit met het Draaiboek" value="DRAAIBOEK" name="afhandelingsWijze" checked="checked" class="validateRequired" data-radioregelen="regelenDraaiboek">
        <span class="checked">Ik regel dit met het Draaiboek</span>
    </label>

    <br/>     
        
    <label class="radio"><input type="radio" data-label="Laat een uitvaartverzorger deze taak regelen" value="DOOR_SCU" name="afhandelingsWijze" class="validateRequired" data-radioregelen="latenRegelen">
        <span class="unchecked">Laat een uitvaartverzorger deze taak regelen</span>
    </label>
        
    <br/>    
        
    <label class="radio">
        <input type="radio" data-label="Ik wil deze taak buiten het Draaiboek om regelen" value="BUITEN_DRAAIBOEK" name="afhandelingsWijze" class="validateRequired"  data-radioregelen="buitenOmRegelen">
            <span class="unchecked">Ik wil deze taak buiten het Draaiboek om regelen</span>
    </label>
        
    <br/>            
        
    <label class="radio">
        <input type="radio" data-label="Ik wil voor deze taak niets regelen" value="NIET_AFHANDELEN" name="afhandelingsWijze" class="validateRequired"   data-radioregelen="nietsRegelen">
            <span class="unchecked">Ik wil voor deze taak niets regelen</span>
    </label>
                    
    <div class="radioAlternativeChoices">
        <div class="contentBlock hideContentBlockTemp latenRegelen">
            latenRegelen        
        </div>        
        <div class="contentBlock hideContentBlockTemp buitenOmRegelen">
            buitenOm        
        </div>       
        <div class="contentBlock hideContentBlockTemp nietsRegelen">
            niets        
        </div>     
    </div>
        
</div>

CSS

.hideContentBlockTemp{
    display:none;
}

JavaScript

//first run copieer content
$('.temp .contentBlock').addClass('regelenDraaiboek').after($('.radioAlternativeChoices').html());
$('.controls input:radio').on('change',function(){
    var temp = $(this).attr("data-radioregelen");
        $('.temp .contentBlock:not(.'+temp+')').hide();
        $('.temp .'+temp).show();    

});