JSFiddle - React, Tailwind, and code Playground

by ratdon

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="progressbar">
    <div id="percentage" align='center'></div>
</div>
<form method='post' action=''>
    <div class='accordion'>
         <h4>PRESIDENT</h4>

        <div class='radio'>
            <input type='radio' id='13002' name='1president' value='13002' />
            <label for='13002'>
                <div>
                    <table class='accor'>
                        <tr>
                            <td>Roll No.</td>
                            <td>13002</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>Ashweeta Deshpande</td>
                        </tr>
                        <tr>
                            <td>Class</td>
                            <td>BCOM II yr International Business</td>
                        </tr>
                    </table>
                </div>
            </label>
            <input type='radio' id='13004' name='1president' value='13004' />
            <label for='13004'>
                <div>
                    <table class='accor'>
                        <tr>
                            <td>Roll No.</td>
                            <td>13004</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>Bablu Menon</td>
                        </tr>
                        <tr>
                            <td>Class</td>
                            <td>BSC III yr Marine Biology</td>
                        </tr>
                    </table>
                </div>
            </label>
        </div>
         <h4>VICE-PRESIDENT</h4>

        <div class='radio'>
            <input type='radio' id='13020' name='2vice-president' value='13020' />
            <label for='13020'>
           ...

CSS

.ui-progressbar {
    position: relative;
}
#percentage {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}
.accor {
    border:0;
    border-collapse: separate;
    border-spacing: 3px;
    text-align:left;
    font-size: .9em;
    padding: 0.5em;
    color: #798196;
    width: 100%;
}

JavaScript

$(function () {
    $(".selector").accordion({
        header: "h4"
    });
    $(".accordion").accordion({
        heightStyle: "content"
    });
    $('input:submit, button').button();
    $(".radio").buttonset();
    $('#progressbar').progressbar();

    $.fn.progress = function () {
        var totalChecked = 0;
        var totalRadioGroups = 0;
        var previousName = '';
        $.each($("input[type='radio']"), function (index, value) {
            var radioName = $(this).attr('name');
            var radioId = this.id;

            if (previousName != radioName) {
                totalRadioGroups++;
            }
            if ($('#' + radioId).is(':checked')) {
                totalChecked++;
            }
            previousName = radioName;
        });
        var percentage = (totalChecked / totalRadioGroups) * 100;
        $('#progressbar').progressbar('value', percentage);
        $('#percentage').html(percentage.toFixed(0) + "%");
    };

    $().progress();

    $("input[type='radio']").click(function () {
        $().progress();
    });
});
$(function () {
    $("input[type='text'], input[type='password']").button().addClass('my-textfield').off('mousedown').off('keydown');
    $('select').selectBoxIt({
        theme: "jqueryui",
        showEffect: "fadeIn",
        showEffectSpeed: 200,
        hideEffect: "fadeOut",
        hideEffectSpeed: 200,
        showFirstOption: false
    });
});