JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<div id="wrapper">
    <div class="contacts content">
        <div id="Name">
            <span class=""></span>
        </div>
        <div id="Email">
            <span>Email: </span>
            <input type="text" id="bbb" />
        </div>
        <div id="Phone">
            <span>Phone: </span>
            <input type="text" id="bbb" />
        </div>


        <div id="box" style="display: none;">
            <div class='dropdown'>
                <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Email</a>
                <ul id='menu1' class='dropdown-menu'>
                    <li><a href='#'>Work</a></li>
                    <li><a href='#'>Home</a></li>
                    <li><a href='#'>Mobile</a></li>
                </ul>
            </div>
        </div>
    
        <div id="demo1"></div>
        <div id="demo2"></div>
        <div id="demo3">
            <span>Email: </span>
            <span class="qqq"></span>
        </div>
        <div id="demo4">
            <span>Phone: </span>
            <span class="www"></span>
        </div>

        
    </div>

</div>

CSS

body {
    max-width: 0 !important;
}




.content {
    width: 671px;
    background: #f5f5f5;
    border: 1px solid #e9e9e9;
    border-radius: 3px;
    padding: 20px 12px;
}

.content table {
    table-layout: auto;
}

.content label {
}

.content tr td:first-child {
    width: 75px;
}

.content div.button {
    margin: 30px 0 0;
}

.xxx a:hover {
    text-decoration: none !important;
}


.contacts > div span {
    display: inline-block;
    width: 70px;
}

.contacts > div div > a:hover {
    color: #08C;
    text-decoration: none;
}

.contacts > div:focus {
    outline: 0;
}

#demo1 {
    margin: 15px 0 0;
}

JavaScript

$(function () {
    function foo(x) {        
        var div = ('#' + x);
        var menu = document.getElementById('box');
        var addnew = '<a href="#" class="addnew">add new</a>';
        
        // Remembers drop-down selection
        function bar() {
            $(document).on('click','.dropdown ul a',function(){
                trav = $(this).parent().parent().parent().parent().parent();
                parentid = trav.attr('id'); 
                text = $(this).text();
                
                if (parentid == 'Email') {
                    trav.attr('class', text);
                    $('#demo3 .qqq').text(text);
                } else if (parentid == 'Phone') {
                       trav.attr('class', text);
                    $('#demo4 .www').text(text);
                }
                
                var classes = $(div).attr('class');
                $(div + ' span .dropdown .dropdown-toggle').html(classes + ' <b class="caret"></b>');
        
                $(div + ' input').focus(function () {
                    $(div + ' span').html(menu.innerHTML);
                    $(div + ' span' + ' a.dropdown-toggle').text(classes + " ").append('<b class="caret"></b>');
                });
            });
        }
        
        // Div focus
        $(div + ' input').parent().attr("tabindex",-1).focus( function() {
            if ($(div).attr('class')) {
                saved = $(div).attr('class');
            } else {
                saved = 'Work' }
                        
            $(this).css('background','#eee');
            $(div + ' span').html(menu.innerHTML);
            $(div + ' span .dropdown').addClass('open');
            $(div + ' span' + ' a.dropdown-toggle').html(saved + ' <b class="caret"></b>');

            bar();
                    
            $(this).focusout(function() {
                $(this).children('span').text(x);
                $(this).css('background','none');                
            });
    ...