JSFiddle - React, Tailwind, and code Playground

by chriscdk

HTML

<ul>
     <li class="category England">England
        <ul class="EnglandList">    
            <li class="category Birmingham"><span class="cityMap Birmingham" onClick='map.setCenter(new GLatLng(52.48738,-1.891136), 10);'>Birmingham</span> 
                <ul class="BirminghamList">
                    <li class="category map-370" onClick='map.setCenter(new GLatLng(52.475361,-1.888153), 14);'>Birmingham Central 
                        <ul>
                          <li><a href="#">Cash Pot Amusement</a></li>
                          <li><a href="#">Court News</a></li>
                          <li><a href="#">Digbeth News</a></li>
                          <li><a href="#">Zamino News</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="category London"><span class="cityMap London" onClick='map.setCenter(new GLatLng(51.50733, -0.12768), 10);'>London</span> 
                <ul class="LondonList">
                    <li class="category map-312" onClick='map.setCenter(new GLatLng(51.652791,-0.199818), 14);'>Barnet 
                        <ul>
                            <li><a href="#">Barnet Store</a></li>
                            <li><a href="#">Chudys Beauty</a></li>
                            <li><a href="#">Cutting Style</a></li>
                            <li><a href="#">Easy &amp; Fast Money Transfer</a></li>
                            <li><a href="#">Jurij Komka</a></li>  
                        </ul>
                    </li>
                    <li class="category map-316" onClick='map.setCenter(new GLatLng(51.565740,-0.277969), 14);'>Brent 
                        <ul>
                          <li><a href="#">Brent News Agents</a></li>
    
                        </ul>
                    </li>
                    <li class="category map-298" onClick='map.setCenter(new GLatLng(51.416228,-0.055748), 14);'>Bromley 
                        <ul>
                         ...

CSS

.plusimageapply {color:green;border-left:5px solid blue;}
.minusimageapply li {
    margin-left:10px;
    position:relative;
    z-index:20;
}
.cityMap {position:relative; z-index:2}
.minusimageapply {color:red;}

JavaScript

$('li.category').addClass('plusimageapply');
$('.plusimageapply ul').hide();
$('li.category.England').removeClass('plusimageapply').addClass('minusimageapply');
$('li.category.London').removeClass('plusimageapply').addClass('minusimageapply');
$('.EnglandList').css('display', 'block');
$('.LondonList').css('display', 'block');

$('li.category').each(

function(column) {
    $(this).click(function(event) {
        if (this == event.target) {
            if ($(this).is('.plusimageapply')) {
                $(this).children().show();
                $(this).removeClass('plusimageapply');
                $(this).addClass('minusimageapply');
            }
            else {
                $(this).children().hide();
                $(this).removeClass('minusimageapply');
                $(this).addClass('plusimageapply');
                $('.cityMap').show();
            }
        }
    });
});