JSFiddle - React, Tailwind, and code Playground

by chrisfrisina

HTML

<div class="block gc" id="gc">
<section class="abstract" style="display: block; "><input type="checkbox" checked="checked" id="header_abstract" name="header_abstract"><label for="header_abstract" class="gcheader">SectionHeader</label><br>
    <div class="superseven">
        <section style="display: block; ">
            <div class="oneseven" style="width: 14.326647564469914%; ">
                <input type="checkbox" checked="checked" id="nabstract_design" name="nabstract_design"><label for="nabstract_design" class="gcsubheader">SubS 1</label><br>
                <ul><li>A</li><li>B</li><li>C</li></ul>
            </div>
        </section>
        <section style="display: block; ">
            <div class="oneseven" style="width: 14.326647564469914%; ">
                <input type="checkbox" checked="checked" id="nabstract_expertise" name="nabstract_expertise"><label for="nabstract_expertise" class="gcsubheader">2</label><br>
                <ul><li>A</li><li>B</li><li>C</li></ul>
            </div>
        </section>
        <section style="display: block; ">
            <div class="oneseven" style="width: 14.326647564469914%; ">
                <input type="checkbox" checked="checked" id="nabstract_skills" name="nabstract_skills"><label for="nabstract_skills" class="gcsubheader">3</label><br>
                <ul><li>A</li><li>B</li><li>C</li></ul>
            </div>
        </section>
        <section style="display: block; ">
            <div class="oneseven" style="width: 14.326647564469914%; ">
                <input type="checkbox" checked="checked" id="nabstract_tools" name="nabstract_tools"><label for="nabstract_tools" class="gcsubheader">4</label><br>
                <ul><li>A</li><li>B</li><li>C</li></ul>
            </div>
        </section>
        <section style="display: block; ">
            <div class="oneseven" style="width: 14.326647564469914%; ">
                <input type="checkbox" checked="checked" id="nabstract_projects"...

CSS

#gc {
    width:74%;
    float: left;
    border: 1px solid #F16529;
}
.hidden {
    color: red;
    font-weight: bold;
}
.aside {
    display: block;
    font-size: 11px;
    float: right;
    width: 24%;
}
.aside .abstract{
    font-size: 11px;
    display: block;
    clear: left;
}
.oneseven {
    display: inline-block;
    float: left;
    width: 14.285714%;
}

JavaScript

// Abstract
    //hide all but title initially
        $('fieldset.abstract label:not(:first)').hide();
    //individual Abstract elements Toggle Buttons
        //Currently on, turning Off
            $('.block > .abstract > .superseven > section > .oneseven > input').on('change', function () {
                    var hidden = 0;
                    var width = ((1/(7-hidden))*100);
                    if (this.checked) {
                    } else {
                        var index = $(this).closest('section').prevAll('section').length;
                        //GC Side
                            var hidden = ($('.block > .abstract > .superseven > section > :hidden').length + .98);
                            var width = ((1/(7-hidden))*100);
                            $('.oneseven').css("width", (width) + "%");
                            $('.block > .abstract > .superseven > section').eq(index).hide();  //removed "slow" because of rendering
                            $('.block > .abstract > .superseven > section').eq(index).prop('checked' , false);
                        //Right Side
                            $('fieldset.abstract > div > label').eq(index).show("slow");
                            $('fieldset.abstract > div > label').eq(index).toggleClass('hidden');
                            $('fieldset.abstract > div > input').eq(index).prop('checked' , true);
                        //If ALL Elements are turned off
                        if (($('fieldset.abstract > div > input:checkbox:checked').length) == 7) {
                            $('.block > .abstract > .superseven > section').eq(index).hide();  //removed "slow" because of rendering
                            $('.block > .abstract').hide("slow");
                            $('.block > .abstract > .superseven > section input').each(function(){
                                $(this).prop('checked' , true);
                            });
                            $('fieldset.abstract >...