Mas Pardi Jadul

Jquery :

$("#masaccordionpardi > ul > li ul").each(function(i,l){var s=$(l).find("li").length,a=''+s+"";$(l).closest("li").children("a").append(a)}),$("#masaccordionpardi ul ul li:odd").addClass("odd"),$("#masaccordionpardi ul ul li:even").addClass("even"),$("#masaccordionpardi > ul > li > a").click(function(){$("#masaccordionpardi li").removeClass("active"),$(this).closest("li").addClass("active");var i=$(this).next();return i.is("ul")&&i.is(":visible")&&($(this).closest("li").removeClass("active"),i.slideUp("normal")),i.is("ul")&&!i.is(":visible")&&($("#masaccordionpardi ul ul:visible").slideUp("normal"),i.slideDown("normal")),0==$(this).closest("li").find("ul").children().length});

Html :

<div id="masaccordionpardi">
<ul>
<li class="active"><a href="#" target="_blank"><span><i class="fa fa-fw fa-home"></i> Home</span></a></li>
<li><a href="#"><span><i class="fa fa-fw fa-bars"></i> Menus</span></a>
<ul>
<li><a href="#"><span>Menu 1</span></a></li>
<li><a href="#"><span>Menu 2</span></a></li>
</ul>
</li>
<li><a href="#"><span><i class="fa fa-fw fa-cog"></i> Settings</span></a></li>
<li><a href="#"><span><i class="fa fa-fw fa-phone"></i> Contact</span></a></li>
</ul>
</div>

CSS Style :

/* Maspardi acrodion */

#masaccordionpardi,#masaccordionpardi a,#masaccordionpardi li,#masaccordionpardi ul{margin:0;padding:0;border:0;list-style:none;font-weight:400;text-decoration:none;line-height:1;font-family:'Open Sans',sans-serif;font-size:14px;position:relative}#masaccordionpardi a{line-height:1.3}#masaccordionpardi{width:250px}#masaccordionpardi>ul>li>a{padding-right:40px;font-size:25px;font-weight:700;display:block;background:#2b2b2b;color:#fff;border-bottom:1px solid #000;text-transform:uppercase}#masaccordionpardi>ul>li>a>span{background:#444;padding:10px;display:block;font-size:13px;font-weight:300}#masaccordionpardi>ul>li>a:hover{text-decoration:none}#masaccordionpardi>ul>li.active{border-bottom:none}#masaccordionpardi>ul>li.active>a{color:#fff}#masaccordionpardi>ul>li.active>a span{background:#2b2b2b}#masaccordionpardi span.cnt{position:absolute;top:8px;right:15px;padding:0;margin:0;background:0 0}#masaccordionpardi ul ul{display:none}#masaccordionpardi ul ul li{border:1px solid #e0e0e0;border-top:0}#masaccordionpardi ul ul a{padding:10px;display:block;color:#000;font-size:13px}#masaccordionpardi ul ul a:hover{color:#00f}#masaccordionpardi ul ul li.odd{background:#f4f4f4}#masaccordionpardi ul ul li.even{background:#fff}

Plugin jquery and Font awesome Jika belum ada :

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Contoh Hasil :