JSFiddle - React, Tailwind, and code Playground

by Sean Cannon

HTML

<ul class="citychooser">
    <li class="heading">Please Choose Your City</li>
    <li class="city">
        <img class="fltlft" src="images/pinpoint_icon.png" width="64" height="50" alt="Pinpoint Icon">Austin, TX</li>
    <li class="city">
        <img class="fltlft" src="images/pinpoint_icon.png" width="64" height="50" alt="Pinpoint Icon">Houston, TX</li>
    <li class="city">
        <img class="fltlft" src="images/pinpoint_icon.png" width="64" height="50" alt="Pinpoint Icon">Dallas, TX</li>
    <li class="city">
        <img class="fltlft" src="images/pinpoint_icon.png" width="64" height="50" alt="Pinpoint Icon">San Marcos, TX</li>
    <li class="city">
        <img class="fltlft" src="images/pinpoint_icon.png" width="64" height="50" alt="Pinpoint Icon">San Antonio, TX</li>
    <li class="city">
        <img class="fltlft" src="images/pinpoint_icon.png" width="64" height="50" alt="Pinpoint Icon">Galveston, TX</li>
</ul>

CSS

.city {
    display:none;
}
.city:hover {
    background-color: #808080;
}
.cityhover {
    background-color: #808080!important;
}
.citychooser {
    width: 555px;
    float: right;
    list-style-type: none;
    margin-top: 0px;
}
.citychooser li {
    background-color: #cccccc;
    margin-bottom: 5px;
    height: 50px;
    line-height: 50px;
}
.citychooser .heading {
    text-indent: 20px;
}

JavaScript

$ = jQuery;
$('.citychooser').on('click', '.heading', function () {
    $('.city').show();
});

$('.citychooser').on('click', '.city', function () {
    $(this).show();
    $('.heading').hide();
    $('.city').removeClass('cityhover');
    $(this).removeClass('city');
    $(this).addClass('cityhover');
    $('.city').hide();
});

$('.citychooser').on('click', '.cityhover', function () {
    $('.heading').show();
    $('.city').show();
    $('.cityhover').removeClass('cityhover');
});