JSFiddle - React, Tailwind, and code Playground

by James

HTML

<!--Begins the radio button hiding-->
<div id="div0" class="tabs"> 
    
<input type="radio" name="tabs-group-0" class="radio" value="option1" id="tab-0-1">
    <label for="tab-0-1">Tab 0-1</label>
    
<input type="radio" name="tabs-group-0" class="radio" value="option2" id="tab-0-2">
    <label for="tab-0-2">Tab 0-2</label>
    
<input type="radio" name="tabs-group-0" class="radio" value="option3" id="tab-0-3">
    <label for="tab-0-3">Tab 0-3</label>
    
<input type="radio" name="tabs-group-0" class="radio" value="option4" id="tab-0-4">
    <label for="tab-0-4">Tab 0-4</label>
    
    
    <div>#1</div>
    <div> </div>
    <div>#2</div>
    <div> </div>
    <div>#3</div>
    <div> </div>
    <div>#4</div>
    <div> </div>
    
    </div>

    
<div id="div1" class="tabs" > 

<input id="tab-1-1" name="tabs-group-1" type="radio" />
    <label for="tab-1-1">Tab 1-1</label>
    
<input id="tab-1-2" name="tabs-group-1" type="radio" />
    <label for="tab-1-2">Tab 1-2</label>
    
<input id="tab-1-3" name="tabs-group-1" type="radio" />
    <label for="tab-1-3">Tab 1-3</label>
    
    
    
    
    <div>#1</div>
    <div> </div>
    <div>#2</div>
    <div> </div>
    <div>#3</div>
    
    
</div> <!--<div id="tabs-1" class="tabs"> -->
    

    
<div id="div2"class="tabs">

<input id="tab-2-1" name="tabs-group-2" type="radio" />
    <label for="tab-2-1">Tab 2-1</label>
<input id="tab-2-2" name="tabs-group-2" type="radio" />
    <label for="tab-2-2">Tab 2-2</label>
<input id="tab-2-3" name="tabs-group-2" type="radio" />
    <label for="tab-2-3">Tab 2-3</label>
<input id="tab-2-4" name="tabs-group-2" type="radio" />
    <label for="tab-2-4">Tab 2-4</label>
<input id="tab-2-5" name="tabs-group-2" type="radio" />
    <label for="tab-2-5">Tab 2-5</label>
    
    
    
   
    
    
   
    
    <div>#1</div>
    <div> </div>
    <div>#2<br>#2</div>
    <div> </div>
    <div>#3<br>#2<br>#3</div>
    <div> </div>
    <div>#4<br>#2<br>#3<br>#4</div>
    <div> </div>
 ...

CSS

/* all tabs */

/*At least they start out hidden now
#div1,#div2,#div3,#div4 {
    display: none;
}*/

/*.tabs input {display:none}*/

.tabs label {
    background-color:#ccc; 
    border:solid 2px #fff;
    cursor: pointer;
    display:inline-block; 
    padding:5px 15px;
}

.tabs div {
    display:none;
    border:solid 2px #adf; 
    padding: 15px;
}

#div0 :checked + * + * + * + label { background-color:#adf;border-color:#adf}
#div0 :checked + * + * + * + * + * + * + * + div { display: block }

/* tabs-1 */

#div1 :checked + * + * + label { background-color:#adf;border-color:#adf}
#div1 :checked + * + * + * + * + * + div { display: block }

/* tabs-2  - more tabs need more '+ * +'  */

#div2 :checked + * + * + * + * + label { background-color:#adf;border-color:#adf}
#div2 :checked + * + * + * + * + * + * + * + * + * + div { display: block }

/* tabs-3  - You need one + seperated by one * per tab in a group. '+ * +'  */

#div3 :checked + * + * + label { background-color:#adf;border-color:#adf}
#div3 :checked + * + * + * + * + * + div { display: block }

/* tabs-4  - All of the '+ * +' is used to reference the tab content being shown */

#div4 :checked + * + * + label { background-color:#adf;border-color:#adf}
#div4 :checked + * + * + * + * + * + div { display: block }








td {
    color: black;
    border:solid 2px #adf; 
    padding: 15px;
}

JavaScript

///
$(function() {
$('.radio').click(function() {
if($(this).val() == 'option1') {$('#div1').slideToggle('500');}
if($(this).val() == 'option2') {$('#div2').slideToggle('500');} 
if($(this).val() == 'option3') {$('#div3').slideToggle('500');}
if($(this).val() == 'option4') {$('#div4').slideToggle('500');}
});
});
///




// requires JQuery Uncheckable radio buttons 
(function( $ ){

    $.fn.uncheckableRadio = function() {

        return this.each(function() {
            $(this).mousedown(function() {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function() {
                if ($(this).data('wasChecked'))
                    this.checked = false;
            });
        });

    };

})( jQuery );

$('input[type=radio]').uncheckableRadio();