JSFiddle - React, Tailwind, and code Playground

by Shruthi K

HTML

<ul id="treeView">
     <li>Main  List
 <ul>
   <li>Cakes
     <ul>
       <li><a href="#">Plain Sponge</a></li>
       <li><a href="#">Chocolate Cake</a></li>
       <li><a href="#">Apple Tea Cake</a></li>
     </ul>
   </li>
   <li>Biscuits
     <ul>
       <li><a href="#">ANZAC Biscuits</a></li>
       <li><a href="#">Jam Drops</a></li>
       <li><a href="#">Melting Moments</a></li>
     </ul>
   </li>
   <li>Breads/quickbreads
     <ul>
       <li><a href="#">Damper</a></li>
       <li><a href="#">Scones</a></li>
     </ul>
   </li>
 </ul>
     </li>
 </ul>

CSS

#treeView li{list-style: none;}
#treeView ul { padding-left: 1em; }
#treeView b { padding-right: 1em; }

.Min{
    background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
    padding-left : 20px;
}
.Max{
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat ;
        padding-left : 20px;
}

JavaScript

$(document).ready(function () {
    $('#treeView li:has(li)').addClass("Max").click(function (e) {
       $(this).toggleClass("Max Min")
       $(this).children().toggle()
        e.stopPropagation();
    })
});