JSFiddle - React, Tailwind, and code Playground

by chriscdk

HTML

<ul>
   
   <li class="category England">England
     <ul class="Englandlist">    
       
         <li class="category">Birmingham
     <ul>
    
      <li class="category">Birmingham Central
    <ul>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/371">Cash Pot Amusement</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/374">Court News</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/373">Digbeth News</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/372">Zamino News</a></li>
    
    </ul>
</li>
    
    </ul>
</li>
       
         <li class="category London">London
     <ul class="Londonlist">
    
      <li class="category">Barnet
    <ul>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/313">Barnet Store</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/314">Chudys Beauty</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/319">Cutting Style</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/326">Easy &amp; Fast Money Transfer</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/322">Jurij Komka</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/325">Pine Medical</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/320">Qasim Haalal Butcher</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/315">The Cutting Room</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/323">The Early Bird Sandwich Bar</a></li>
    
      <li><a href="http://www.streetskins.co.uk/index.php/?sites/detail/321">Tiger Tours</a></li>
    
    </ul>
</li>
    
      <li class="category">Brent
    <ul>
    
      <li><a...

CSS

.site-list-menu {
    width:210px;
}
.site-list-menu a {
    color:#9e9e9e;
    text-decoration:none;
}
.site-list-menu ul {
    padding:0;
    border-top:1px solid #CCC;
}
.site-list-menu ul li {
    border-bottom:1px solid #CCC;
}
.site-list-menu ul li a {
    text-indent:6px;
    display:block;
    padding:6px 0;
}
.site-list-menu ul li a:hover, .site-list-menu ul li.selected a  {
    color:#FFF;
    background-color:#BADF0D;
}

.site-list-menu ul li ul {
    display:none;
}
.site-list-menu ul li.selected ul {
    display:block;
}
.site-list-menu ul li.selected ul a {
    color:#666;
    background-color:white;
    border-left:6px solid white;
}
.site-list-menu ul li ul li {
    border-bottom:1px solid white;
    font-size:12px;
}

.site-list-menu ul li ul li:last-child {
    border-bottom:none;
}

.site-list-menu ul li.selected ul li.selected a, .site-list-menu ul li.selected ul li a:hover {
    color:#6D6D6D;
    background-color:#d6e494;
    border-left:6px solid #BADF0D;
}

.site-list-menu ul li.category {
    cursor:pointer;    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

.site-list-menu ul li.category ul {
    margin-left:0px;
    }

.plusimageapply{
    background: url("../images/plus.png") no-repeat scroll left center transparent;
    padding: 2px 0 3px 18px;
    color:green;
}
.minusimageapply{
    background: url("../images/minus.png") no-repeat scroll left 3px transparent;
    padding: 2px 0 3px 18px;
    color:red;
}
 
.selectedimage{
    background: url("../images/selected.png") no-repeat scroll left center transparent;
    padding: 2px 0 3px 18px;
}

JavaScript

$(document).ready(function() {
  $('li.category').addClass('plusimageapply');
  $('li.category').children().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');
      }
   }
});
}
);
});