JSFiddle - React, Tailwind, and code Playground

by James

HTML

<form id='form-id'>
    <!-- Declares that there is a tab here <input type="radio" name="tab group" class="radio" value="option1" id="Which Tab">
    <label for="Which Tab">Tab 0-1</label>
	
Says what is inside of the tab	

<div id='show-me identifier' style='display:none'>Hello </div>
-->
    <!-- Tab 1-->
    <input type="radio" name="tabs-group-0" class="radio" value="option-0-1" id="tab-0-1">
    <label for="tab-0-1">Tab 0-1</label>
    <!-- Tab 2-->
    <input type="radio" name="tabs-group-0" class="radio" value="option-0-2" id="tab-0-2">
    <label for="tab-0-2">Tab 0-2</label>
    <!-- Tab 3-->
    <input type="radio" name="tabs-group-0" class="radio" value="option-0-3" id="tab-0-3">
    <label for="tab-0-3">Tab 0-3</label>
</form>
<!-- contents Tab 0-1-->
<div id='show-tab-0-1' style='display:none'>
    <!-- Tab 1-1-->
    <input type="radio" name="tabs-group-0-1" class="radio" value="option-0-1-1-1" id="tab-0-1-1">
    <label for="tab-0-1-1">Tab 0-1-1</label>
    <!-- Tab 1-2-->
    <input type="radio" name="tabs-group-0-1" class="radio" value="option-0-1-1-2" id="tab-0-1-2">
    <label for="tab-0-1-2">Tab 0-1-2</label>
    <!-- Tab 1-3-->
    <input type="radio" name="tabs-group-0-1" class="radio" value="option-0-1-1-3" id="tab-0-1-3">
    <label for="tab-0-1-3">Tab 0-1-3</label>
    <br />
    <!-- contents Tab 1-1-->
    <div id='show-tab-0-1-1-1' style='display:none'>
        <!-- Tab 1-1-1-->
        <input type="radio" name="tabs-group-0-1-1" class="radio" value="option-0-1-1-1" id="tab-0-1-1-1">
        <label for="tab-0-1-1-1">Tab 0-1-1-1</label>
        <!-- -->
        <!-- Tab 1-1-2-->
        <input type="radio" name="tabs-group-0-1-1" class="radio" value="option-0-1-1-2" id="tab-0-1-1-2">
        <label for="tab-0-1-1-2">Tab 0-1-1-2</label>
        <!-- Tab 1-1-3-->
        <input type="radio" name="tabs-group-0-1-1" class="radio" value="option-0-1-1-3" id="tab-0-1-1-3">
        <label for="tab-0-1-1-3">Tab 0-1-1-3</label>
        <!-- -->
 ...

CSS

/* all tabs */

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

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


}
#show-tab-0-1 :checked + * + * + * label {
    background-color:#adf;
    border-color:#adf
}
#div0 :checked + * + * + * + * + * + * div {
    display: block
}
/* tabs-1 */
 #div-0-1 :checked + * + * + label {
    background-color:#adf;
    border-color:#adf
}
#div-0-1 :checked + * + * + * + * + * + div {
    display: block
}
/* tabs-0-1-1 */
 #div-0-1-1 :checked + * + * + label {
    background-color:#adf;
    border-color:#adf
}
#div-0-1-1 :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
}

JavaScript

/// For this project http://jsfiddle.net/PhoenixOfBlades/91k9bzth/5/

///This code is about The Accordian i'm trying to put into the tabs.
/*https://jsfiddle.net/PhoenixOfBlades/6ho2jonk/ */

///This code is about tabs

// This function allows you to uncheck radio buttons using JQuery
(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();

///


/// This function allows tabs to close after being unchecked... kinda. It works better here 
/// http://jsfiddle.net/PhoenixOfBlades/nnz32k1r/
$(function() {
$('.radio').click(function() {
if($(this).val() == '"option-0-1') {$('#show-tab-0-1').slideToggle('500');}
if($(this).val() == 'option-0-2') {$('#show-tab-0-2').slideToggle('500');} 
if($(this).val() == 'option-0-3') {$('#show-tab-0-3').slideToggle('500');}
});
});
///


///Code about Tabs

/*
Says what the tab does	

$('input[name=tab group]').click(function () {
    if (this.id == "Which Tab") {
        $("#show-me identifier").show('slow');
    } else {
        $("#show-me identifier").hide('slow');
    }
}); 
*/

//show-tab-0-1 from tab-0-1
$('input[name=tabs-group-0]').click(function () {
    if (this.id == "tab-0-1") {
        $("#show-tab-0-1").show('slow');
    } else {
        $("#show-tab-0-1").hide('slow');
    }
});

//show-tab-0-1-1-1 from tab-0-1-1
$('input[name=tabs-group-0-1]').click(function () {
    if (this.id == "tab-0-1-1") {
        $("#show-tab-0-1-1-1").show('slow');
    } else {
        $("#show-tab-0-1-1-1").hide('slow');
    }
});

//show-tab-0-1-1-1-1 from tab-0-1-1-1
$('input[name=tabs-group-0-1-1]').click(function () {
    if (this.id == "tab-0-1-1-1") {
       ...