JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul class="menu">
					  <li class="pp-head" data-depth=1> <a href="#">Menu 1</a>
						<ul class="collapsed1">
						  <li><a href="#">Submenu 1</a></li>
						</ul>
					  </li>
					  <li class="pp-head" data-depth=1> <a href="#">Menu 2 <i class="fa fa-plus"></i></a>
						<ul class="collapsed1">
						  <li><a href="#">Submenu 2</a></li>
						  <li><a href="#">Submenu 2</a></li>
						  <li class="pp-head" data-depth=2 ><a href="#">Submenu 2 <i class="fa fa-plus"></i></a>
							<ul class="collapsed2">
							  <li><a href="#">Subsubmenu 2.2</a></li>
							  <li><a href="#">Subsubmenu 2.2</a></li>
							</ul>
						  </li>
						</ul>
					  </li>
					  <li class="pp-head" data-depth=1> <a href="#">Menu 3 <i class="fa fa-plus"></i></a>
						<ul class="collapsed1">
						  <li><a href="#">Submenu 3</a></li>
						  <li><a href="#">Submenu 3</a></li>
						</ul>
					  </li>
					</ul>

CSS

ul.menu{margin:10px 0 0; padding:0; font-size:12px;}
ul.menu i{font-size:10px; position:absolute; right:15px;}
ul.menu a{text-decoration:none;color:#000;}
ul.menu a:hover{background:#eee;}
ul.menu > li{}
ul.menu > li > a{ border-bottom:1px solid #ddd;padding:6px 20px; display:block;}
ul.menu li > ul{margin:0; padding:0;}
ul.menu li > ul > li{}
ul.menu li > ul > li > a{border-bottom:1px solid #ddd;padding:6px 20px; display:block;background:#f7f7f7;}
ul.menu li > ul > li > ul{margin:0; padding:0;}
ul.menu li > ul > li > ul > li{}
ul.menu li > ul > li > ul > li > a{border-bottom:1px solid #ddd;padding:6px 20px; display:block;background:#f0f0f0;}		
ul.collapsed1 {display: none;}
ul.collapsed2 {display: none;}

JavaScript

$('.pp-head').on('click', function(){
   var depth=$(this).data('depth');    
    alert(depth);
    var flag =0;
    if( $(this).find('.collapsed'+(depth)).css('display') == "block")
           flag=1;
    $('.collapsed'+depth).hide();
    $(this).find('i').removeClass('fa-plus').addClass('fa-minus');
    if(flag == 0)
        $(this).find('.collapsed'+(depth)).show();
	
});