JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css">
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<div id="survey">
    <div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="0" data-path="start,0">
        <label>Go to step 1</label><input name="start" type="radio" value="1" data-road="0,1"/>
        <br/>
        <label>Go to step 2</label><input name="start" type="radio" value="2" data-road="0,2"/>
    </div>
    
    <div class="step ui-tabs ui-widget ui-widget-content ui-corner-all" id="1" data-path="0,1">
        Path = 0,1
    </div>
    
    <div class="step ui-tabs ui-widget ui-widget-content ui-corner-all" id="2" data-path="0,2">
        Path = 0,2<br/>
        <label>Go to step 1</label><input name="something1" type="radio" value="1" data-road="0,2,21"/>
        <br/>
        <label>Go to step 2</label><input name="something1" type="radio" value="2" data-road="0,2,22"/>
    </div>
    
    <div class="step active ui-tabs ui-widget ui-widget-content ui-corner-all" id="21" data-path="0,2,21">
        Path = 0,2,21<br/>
        <label>Go to step 1</label><input name="something2" type="radio" value="1" data-road="0,2,21,211"/>
        <br/>
        <label>Go to step 2</label><input name="something2" type="radio" value="2" data-road="0,2,21,212"/>
    </div>
    
    <div class="step ui-tabs ui-widget ui-widget-content ui-corner-all" id="22" data-path="0,2,22">
        Path = 0,2,22<br/>
        <label>Go to step 1</label><input class="multicheckbox" name="something3" type="checkbox" value="1"
        data-road="0,2,22,221"/>
        <br/>
        <label>Go to step 2</label><input class="multicheckbox" name="something3" type="checkbox" value="2"
        data-road="0,2,22,222"/>
    </div>
    
    
    <div class="step ui-tabs ui-widget ui-widget-content ui-corner-all" id="212" data-path="0,2,21,212">
        Path = 0,2,21,212
    </div>
    <div...

CSS

div {
    border: 1px solid #ccc;
    padding: 3px;
    margin: 5px;
}

.step,.multiStep {
    display: none;
}

JavaScript

$(document).ready(function() {
    $('input').live('click', function(e) {
        $('.step').hide();
        var items = $('#survey div:visible');
        var elem = $(this);

        // Looping though all the div items:
        items.each(function(i) {
            var elem = $(this);
            path = elem.data('path').split(',');
            //removing start value
            var removeItem = "start";
            path = jQuery.grep(path, function(value) {
                return value != removeItem;
            });
            //console.log(path, 'g_path');
        });


        var road = elem.data('road').split(',');
        var lol = elem.data('road').split(',');
        $.each(road, function(index, value) {
            //console.log((value));
            $('#' + value).show();
        });
        //console.log(road, 'road');
        var newArray = _.difference(path, road);
        //console.log(newArray, 'newArray');
        $('#' + newArray).hide();

        ///this part checkboxes
        $('input[type=checkbox]').each(function() {
            var sThisVal = ($(this).is(':checked'));
            console.log(sThisVal);
            //                    var lastRoad = _.last(lol);
            if (this.sThisVal === false) {
                var errs = this.data('road');
                var lol = _.last(errs);
                console.log(lol, 'lol');
                console.log($('#' + _.last(lol) + ''));
            }
        });
        //                $('input[type=checkbox]').each(function () {
        //                    var sThisVal = ($(this).is(':checked'));
        //                    console.log (sThisVal);
        ////                    var lastRoad = _.last(lol);
        //                    if (sThisVal === false){
        //                      $('#'+ _.last(lol) + '',this).hide();
        //                        console.log($('#'+ _.last(lol) + '',this));
        //                    }
        //                });



    });
});