JSFiddle - React, Tailwind, and code Playground

by Douglas Mosman

HTML

<a id="nobbut" href="javascript:void(0)" class="black">Qualify</a>

<div id="section-nav">
    <h3>Continuing Education<br />Online</h3>
    <a href="#"></a>
    <!-- navigation object : Left Navigation -->
    <ul>
        <li class="">
            <a href="#">Registration FAQ's</a>
            <ul class="multilevel-linkul-0">
                <li><a href="/howTo.aspx">How to Register</a></li>
                <li><a href="/courseHowTo.aspx">How to Access Online Courses</a></li>
                <li><a href="/accountHowTo.aspx">How to Manage My Account</a></li>
                <li><a href="/ceRegHelp.aspx">Help</a></li>
            </ul>
        </li>
        <li class="">
            <a href="#">Log In/Create New Account</a>
            <ul  class="multilevel-linkul-0">
                <li><a id="menuLogin" href="/Login.aspx">Login to Your Account</a></li>
            </ul>
        </li>
        <li class="">
            <a href="#">Shopping Cart</a>
            <ul class="multilevel-linkul-0">
                <li><a href="/Checkout.aspx">Go To Shopping Cart</a></li>
            </ul>
        </li>
        <li class="last active">
            <a href="#">My Account</a>
            <ul style="display: block;" class="multilevel-linkul-0" title="">
                <li><a href="/Dashboard.aspx">Go To My Account</a></li>
            </ul>
        </li>
    </ul>
    
</div>

<div style="max-width: 100px; margin-right: 15px; margin-top: 5px;  float:left;">
    
    
    <a href="/Checkout.aspx">
        <img id="shopCart2" alt="shopping cart" class="auto-style1" longdesc="shopping cart image"
        src="/media/ce_images/Shopping-Cart-Empty-32.png" />
    </a>
    <a id="cartCount" href="/Checkout.aspx" style="font-family: 'Trebuchet MS'; font-size: 11px; font-weight: bold; color:#3D637B; ">
        0 Items
    </a>
</div>
<div style="max-width: 250px; float: right; font-family: 'Trebuchet MS'; font-size: 12px; color: #3D637B;">
    <span...

JavaScript

$(document).ready(
    function(){
        $("#loginGreeting").text("Welcome Guest |");
        $("#btnLogin").val("Do Login");
        $("#btnLogin").attr("onclick", "DoLogin");

    }
);

function() GoLogout{
        $("#menuLogin").attr("href", "/Login.aspx");
        $("#menuLogin").text("Go to Login Screen");
        $("#menuLogin").off("click","GoLogout");
}

function() DoLogout{
        alert('You are logging out');
        $("#loginGreeting").text("Welcome Guest");
        $("#btnLogin").val("Please log in");
        $("#btnLogin").attr("onclick", "DoLogin");
        $("#menuLogin").attr("href", "/Login.aspx");
        $("#menuLogin").text("Go to Login Screen");
        $("#menuLogin").off("click","DoLogout");

}

function() DoLogin{
        alert('You are logging in');
        $("#loginGreeting").text("Welcome Logged In Person!");
        $("#btnLogin").val("Logout");
        $("#btnLogin").attr("onclick", "DoLogout");
        $("#menuLogin").attr("href", "javascript:void(0);");
        $("#menuLogin").text("You are logged in.  Click to logout");
        $("#menuLogin").on("click", "DoLogout");
}