JSFiddle - React, Tailwind, and code Playground

by scaillerie

HTML

<div class="container_vragen">
        <div>
            Heb je al je verplichtingen al geregeld?
            <span> 
                Ja<input name="ja value="Ja" type="checkbox" class="sub_antwoord open_sub_ja">
                Nee<input name="ja value="Nee" type="checkbox" class="sub_antwoord open_sub_no">
                <span class="extra_info">
                    ?
                    <div class="extra_info_popup">
                        Hidden tekst
                    </div>
                </span>
            </span>
        </div>
        <div class="submenu">
            <div>Heb je DigiD?
                <span> 
                    Ja<input name="ja value="Ja" type="checkbox" class="sub_antwoord">
                    Nee<input name="ja value="Nee" type="checkbox" class="sub_antwoord">
                    <span class="extra_info">
                        ?
                        <div class="extra_info_popup">
                            Hidden tekst
                        </div>
                    </span>
                </span>
            </div>
            <p class="akkoord"><br/><br/>Akkoord</p>
        </div>
    </div>
    
    <div class="container_vragen">
        Heb je al je verplichtingen al geregeld?
        <span> 
            Ja<input name="ja value="Ja" type="checkbox" class="sub_antwoord open_sub">
            Nee<input name="ja value="Nee" type="checkbox" class="sub_antwoord open_sub">
        </span>

            <div class="submenu">
                <p>Heb je DigiD?
                    <span> 
                        Ja<input name="ja value="Ja" type="checkbox" class="sub_antwoord">
                        Nee<input name="ja value="Nee" type="checkbox" class="sub_antwoord">
                    </span>
                </p>
                <p>Heb je DigiD?
                    <span> 
                        Ja<input name="ja value="Ja" type="checkbox" class="sub_antwoord">
                        Nee<input name="ja value="Nee"...

CSS

.container_vragen{
    margin-top:20px;
    float:left;
    width:600px;
    clear:both;
}

.akkoord{
    float:right;
}

.color p{
    float:left;
    width:520px;
    clear:both;
}

span{
    clear:both;
    float:right;
}

.extra_info{
    width:50px;
    clear:none!important;
    float:none!important;
}

    .extra_info_popup{
        position:absolute;
        margin-top:-20px;
        margin-left:100px;
        border:1px solid black;
    }

JavaScript

jQuery(document).ready(function() {

    $('.submenu').hide();

    $('.open_sub_ja , .open_sub_no').click(function() {
        $(this).parents(".container_vragen").find('.submenu').fadeIn(500);
    });

    $('.akkoord').click(function() {
        $(this).parents(".container_vragen").find('.submenu').fadeOut(500);
    });

    $('span .sub_antwoord').click(function() {
        $(this).siblings('input').prop('checked', false);
    });

    $('.extra_info_popup').hide();

    $('.extra_info').hover(function() {
        $(this).find('.extra_info_popup').fadeToggle(50);
    });
});