Find Nestent Child of UL

by Zuhaib Siddiqui

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="sideNavBox">
    <ul>
    <li>List 01</li>
    <li>List 01
        <ul>
        <li>List 01</li>
        <li>List 01</li>
        <li>List 01</li>
        <li>List 01</li>
        <li>List 01</li>
    </ul>
    </li>
    <li>List 01</li>
    <li>List 01</li>
    <li>List 01</li>
</ul>
</div>

CSS

ul{list-style:none;}

#sideNavBox{
	width:100%;
	float:left;
	padding:0;
	margin:0
	
}
	
#sideNavBox .ms-core-navigation{
	background: none repeat scroll 0 0 #fff;
    float: left;
    width: 100%;
    border:1px solid #9b9b9b;}
    
#sideNavBox .ms-core-navigation ul li{
	/*background:url("../images/bullet.jpg") no-repeat scroll 15px 20px rgba(0, 0, 0, 0);*/
	border-bottom:1px dotted #9d9d9d;
	display:list-item;
	position:relative;
}
#sideNavBox .ms-core-navigation ul li .icon{
	color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    padding: 0 8px 2px;
    position: absolute;
    right: 16px;
    top: 16px;
 }
#sideNavBox .ms-core-navigation ul li:first-child{
	border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
#sideNavBox .ms-core-navigation ul li a{
	background:#b9da6f;
	padding:10px 15px;
	font-size:15px;
	color:#fff;
}
#sideNavBox .ms-core-navigation ul li:last-child{
	display:none;
}

#sideNavBox .ms-core-navigation ul li ul{
background:url("../../images/shadow2.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
}

#sideNavBox .ms-core-navigation ul li ul li{
	background: url("../../images/bullet.jpg") no-repeat scroll 22px 20px transparent;
    border-bottom: medium none;
    display: block;
    padding: 0;
}
#sideNavBox .ms-core-navigation ul li ul li:last-child{
	display:block;
}
    
#sideNavBox .ms-core-navigation ul li ul li a{
	background:transparent;
	color:#494949 !important;
	font-size:14px;
	padding:15px 35px;
}

JavaScript

// SIDEBAR ACCORDION
jQuery(document).ready(function (e) { 
event.preventDefault();
    
// SIDEBAR ACCORDION
$('#sideNavBox ul li ul').hide();
    
$('#sideNavBox ul > li:has(ul)').append('<i class="icon glyphicon glyphicon-plus">Z</i>');
    
$('#sideNavBox li .icon').click( function(){
$(this).prev('ul').slideToggle();
$(this).toggleClass('glyphicon-plus');
$(this).toggleClass('glyphicon-minus');
});