JSFiddle - React, Tailwind, and code Playground

by Jayna

HTML

<div class="grid marginBotLg">
    <div class="box-style col-1">
        <div class="box-title">
            <h3>User access</h3>
        </div>
        <div class="box-info">
            <p class="floatLeft marginRigMd">Who do you want to colaborate on this company with?</p>
            <div class="floatRight"> <span class="marginRigSm"><input class="" type="radio" name="radio-users" id="radio-users-1" href="#"><label for="radio-users-1">All users</label></span>
 <span class="marginRigSm"><input type="radio" name="radio-users" id="radio-users-2" href="#" checked><label for="radio-users-2">Only me</label></span>
 <span class="marginRigSm"><input type="radio" name="radio-users" id="radio-users-3" href="#" checked><label for="radio-users-3">Select users</label></span>

            </div>
            <div class="clearfix"></div>
            <div id="js-inner-box-hide" class="inner-box-style">
                <p><strong>Choose users:</strong><a class="link marginLefSm" href="#">Select all</a>  <a class="link marginLefSm" href="#">Select none</a>
                </p>
                <div class="checkbox-1 floatLeft marginRigLg">
                    <input class="checkbox-label" type="checkbox" name="checkbox-A" id="checkbox-A-3" href='' checked>
                    <label for="checkbox-A-3">Josh Cochrane</label>
                    <div class="email marginBotSm">[email protected]</div>
                    <input class="checkbox-label" type="checkbox" name="checkbox-A" id="checkbox-A-4" href='' checked>
                    <label for="checkbox-A-4">Jayna Bergerson</label>
                    <div class="email">[email protected]</div>
                </div>
                <div class="checkbox-2 floatLeft marginRigLg">
                    <input class="checkbox-label" type="checkbox" name="checkbox-A" id="checkbox-A-5" href='' checked>
                    <label for="checkbox-A-5">Ben Patterson</label>
                    <div class="email...

CSS

.js-inner-box-hide {
    display: none;
}

JavaScript

$('input[name=radio-users]').click(function () {
    if (this.id == "radio-users-3") {
        $("#js-inner-box-hide").show('slow');
    } else {
        $("#js-inner-box-hide").hide('slow');
    }
});