JSFiddle - React, Tailwind, and code Playground

by psyne

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.3.2/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.3.2/select2.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.3.2/select2x2.png"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.3/bootstrapSwitch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.2.12/jquery.jgrowl.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.2.12/jquery.jgrowl.min.css">
<div class="container">
    <div class="row">
        <div class="span8">Progress: <span class="pull-right strong progress-label">Just Starting</span>

            <div class="progress">
                <div class="bar" style="width: 0%;"></div>
            </div>
        </div>
        <div class="row">
            <div class="span8 well listing-section">
                 <h4>Tell us about the property</h4>

                <button class="btn review-toggle hidden" type="button">Review</button>
                <div class="questions">
                    <p>What type of listing are you entering?
                        <select id="listing_type_select" data-placeholder="Select a type" class="pull-right combo-select">
                            <option></option>
                            <option value="commercial">Commercial</option>
                            <option value="mobile">Mobile Home</option>
                            <option value="residential">Residential</option>
                        </select>
                    </p>
                    <br />
                    <p id="building_type_question" class="hidden">Select a building type?
                        <select class="hidden...

CSS

.combo-select {
    width: 50%;
}
.listing-section, .agent-section {
    position: relative;
}
.review-toggle {
    position: absolute;
    top: 1.5em;
    right: 1em;
}
.hidden {
    display: none;
}
/* ============================================================
 * bootstrapSwitch v1.2 by Larentis Mattia @spiritualGuru
 * http://www.larentis.eu/switch/
 * ============================================================
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 * ============================================================ */
 .has-switch {
    display: inline-block;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    position: relative;
    text-align: left;
    overflow: hidden;
    line-height: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    min-width: 100px;
}
.has-switch.switch-mini {
    min-width: 72px;
}
.has-switch.switch-small {
    min-width: 80px;
}
.has-switch.switch-large {
    min-width: 120px;
}
.has-switch.deactivate {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default !important;
}
.has-switch.deactivate label, .has-switch.deactivate span {
    cursor: default !important;
}
.has-switch > div {
    display: inline-block;
    width: 150%;
    position: relative;
    top: 0;
}
.has-switch > div.switch-animate {
    -webkit-transition: left 0.5s;
    -moz-transition: left 0.5s;
    -o-transition: left 0.5s;
    transition: left 0.5s;
}
.has-switch > div.switch-off {
    left: -50%;
}
.has-switch > div.switch-on {
    left: 0%;
}
.has-switch input[type=checkbox] {
    display: none;
}
.has-switch span, .has-switch label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor:...

JavaScript

$(document).ready(function () {
    var $progressLabel = $('.progress-label'),
        $progressBar = $('.progress .bar');
    $(".combo-select").select2();
    $("#listing_type_select").on("change", function () {
        var $val = $(this).val();
        $("#building_type_question").removeClass('hidden').children("select").addClass('hidden');
        setProgess("20%");
        switch ($val) {
            case "residential":
                $("#residential_building_type_select").removeClass('hidden');
                break;
            case "mobile":
                $("#mobile_building_type_select").removeClass('hidden');
                break;
            case "commercial":
                $("#commercial_building_type_select").removeClass('hidden');
                break;
        }
    });

    $(".building_type_select").on("change", function () {
        setProgess("40%");
        $('.express-mode-toggle, .agent_onboard').removeClass('hidden');
        saveProgress();
    });

    $(".listing_agent_select").on("change", function () {
        setProgess("60%");
        $('.listing_office_question').removeClass('hidden');
        $('.listing-section').find('.review-toggle').removeClass('hidden').end().find('.questions').toggle();
    });

    $(".listing_office_select").on("change", function () {
        setProgess("100%");
        $('.special_conditions_onboard').removeClass('hidden');
        $('.agent-section').find('.review-toggle').removeClass('hidden').end().find('.questions').toggle();
        saveProgress();
    });

    $('.special_conditions_toggle').on('switch-change', function (e, data) {
        var value = data.value;
        switch (value) {
            case true:
                setProgess("100%");           $('.listing_condition_question').addClass('hidden');
$("#listing_condition_select").select2('data', null);
                saveProgress();
                break;
            case false:
                setProgess("80%");     ...