JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<ul>
    <li class="dropdown" id="loginNav"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-fw fa-lock"></i> Login
                        </a>

        <div class="dropdown-menu dropdown-size-280">
            <form onsubmit="return false;">
                <div class="form-group">
                    <div class="input-group required"> <span class="input-group-addon"><i class="fa fa-user"></i></span>

                        <input type="text" class="form-control" placeholder="E-mail" name="email" id="email"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group"> <span class="input-group-addon"><i class="fa fa-shield"></i></span>

                        <input type="password" class="form-control" placeholder="Password" name="password" id="password"/>
                    </div>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-primary" id="login-submission">Login <i class="fa fa-sign-in"></i>

                    </button>
                </div>
            </form>
        </div>
    </li>
</ul>

JavaScript

var user = '';
if (!user) {
    $('#loginNav, #username').show();
    alert('showing');
} else {
    $("#loginNav, #username").hide();
    $("#loginNav").hide();
    alert(user);
    //did you forget to hide the username?
}