JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="divToggle divRadioSelection" data-toggleselected="">
    <ul>
        <li>
            <label class="radioSelection">
                <input data-toggleselector=".tabs-1" name="a" type="radio"  >
                <p>Nunc tincidunt Nunc tincidunt Nunc tincidunt Nunc tincidunt Nunc tincidunt</p>
            </label>
        </li>
        <li>
            <label class="radioSelection">
                <input data-toggleselector=".tabs-2" name="a" type="radio"  checked>
                <p>Proin dolor Proin dolor Proin dolor Proin dolor Proin dolor Proin dolor </p>
            </label>
        </li>

        <li>
            <label class="radioSelection">
                <input data-toggleselector=".tabs-3" name="a" type="radio" >
                <p>asd qwe asd qwe asd qwe asd qwe asd qwe asd qwe ewrv refqwfewfewfwef werewr </p>
            </label>
        </li>        
    </ul>
    <div class="tabs-1" >
        tabs-1
        <p>Proin  elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur  nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam  ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus  auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis  ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae  ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede  varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus  ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div class="tabs-2">
        tabs-2
        <p>Morbi  tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut  pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed  fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut  tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse  sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi  adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. ...

CSS

body{margin:10px;}
.divToggle ul li{
    display:inline-block;
}
.divToggle .selector{
    display:inline-block;
    padding:10px;
}


.divToggle > div.hiddenToggle{
    display:none;
}

.divToggle > div.activeToggle{
    display:block
}

.radioSelection{
    background: none repeat scroll 0 0 white;
    border: 2px solid white;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 4px #C0C0C0;
    margin-bottom: 20px;
    padding: 12px;
    display: inline-block;
    width: 200px;
    height: 200px;
    padding:5px;
}

.radioSelection input,
.radioSelection .selector{
    float: left;
    left: -1500px;
    position: absolute;
}

.radioSelection:hover,
.activeRadioSelection{
    background:#909F25 url(http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/actions/button_ok.png) bottom center no-repeat;
}

JavaScript

// toggle script toggles all :p
$(document).ready(function(){
    // data-toggleselector=".tabs-1, .tabs-3" wordt geaccepteerd
    // data-toggleselected=".tabs-1, .tabs-2" wordt geaccepteerd
    $.fn.divToggle = function() {
        return this.each(function() {
            var $this = $(this);

            // make array of data-toggleselector
            var toggleselector = [];
            $('[data-toggleselector]',$this).each(function() {
                toggleselector.push($(this).data('toggleselector').split(' '));
            });

            // add class to objects from the array
            var hiddenToggle = toggleselector.join();
            $(hiddenToggle,$this).addClass("hiddenToggle");

            // check if data-toggleselector is set and add class if not set select first
            $("[data-toggleselector]",$this).addClass("selector");
            if($('.selector',$this).is(":checked")){
                $($('.selector:checked',$this).attr("data-toggleselector"),$this).removeClass("hiddenToggle").addClass("activeToggle")
            }
            else if($this.attr("data-toggleselected")){
                $($this.attr("data-toggleselected"),$this).removeClass("hiddenToggle").addClass("activeToggle");
            }else{

                $(toggleselector[0].toString(),$this).removeClass("hiddenToggle").addClass("activeToggle");
            }

            // click event to select the proper data-toggleselector
            $('.selector',$this).on('click' , function () {
                var selector = $(this).attr("data-toggleselector");
                //$(':not('+selector+')',$this).removeClass("activeToggle").addClass("hiddenToggle");
                $('div:not('+selector+')',$this).removeClass("activeToggle").addClass("hiddenToggle");
                $(selector,$this).removeClass("hiddenToggle").addClass("activeToggle");
            });
        });
    };
    $('.divToggle').divToggle();



    $.fn.divRadioSelection = function() {
        return...