Make Dark Accordion Navigation Menu use jQuery

Dua artikel sebelumnya kita sudah bersuka ria dengan tagging HTML pre. Sekarang gue mau mengangkat kembali tutorial yang bertemakan lumayan berjubel dibahas yaitu mengenai accordion Jika sobat searching di blog ini dengan keyword accordion maka akan ditemukan seonggok artikel full stylish seputaran informasi tersebut ;) Sumber resource memberikan judul dengan title dark navigation menu Menu itu kalau dilihat-lihat seperti accordion! Terintegrasi dengan jQuery script jika kita mau menggunakannya. Uniknya dari menu dark navigation yakni menyisipkan variabel CSS :after selector pada tagging unordered listBerikut bumbu-bumbunya...

.areaUL {
width: 200px;
box-shadow: 0 0 10px black;
margin: auto auto; /* menjadi di tengah */
border-radius: 6px;
border: 1px solid #181e26;
}
.areaUL ul {
list-style: none;
margin: 0;
padding: 0;
}
.areaUL li {
padding: 10px;
border-bottom: 1px solid #1c2029;
font-size: 13px;
color: #111;
padding-left: 35px;
font-weight: 600;
position: relative;
cursor: pointer;
}
.areaUL li:first-child {
border-radius: 4px 4px 0px 0px;
}
.areaUL li:last-child {
border-radius: 0px 0px 4px 4px;
border-bottom: none;
}
.areaUL li:after {
font-family: 'Open Sans',sans-serif;
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 12px;
font-size: 14px;
}
.areaUL .profile:after {
content: "\2620";
}
.areaUL .messages:after {
content: "\2709";
}
.areaUL .settings:after {
content: "\270e";
}
.areaUL .logout:after {
content: "\25ba";
}
.areaUL .submenu {
display: none;
background: #212930;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.areaUL .submenu.expanded {
display: block;
}
.areaUL .submenu ul {
padding: 0;
margin: 0;
}
.areaUL .submenu li {
background: transparent;
border: none;
color: #778ea1;
margin-left: 10px;
padding-left: 20px;
}
.areaUL .submenu li:after {
left: 5px;
color: #616b7c;
content: "+";
}

jQuery call<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".menu>li").click(function(){
$(this).next().slideToggle(500);
});
});
//]]>
</script>Markup HTML

<div class='areaUL'>
  <ul class='menu'>
    <li class='profile'>TITLE 1</li>
    <div class='submenu'>
      <ul>
        <li>Sub Title 1.1</li>
        <li>Sub Title 1.2</li>
        <li>Sub Title 1.3</li>
      </ul>
    </div>
    <li class='messages'>TITLE 2</li>
    <div class='submenu expanded'>
      <ul>
        <li>Sub Title 2.1</li>
        <li>Sub Title 2.2</li>
        <li>Sub Title 2.3</li>
      </ul>
    </div>
    <li class='settings'>TITLE 3</li>
    <div class='submenu'>
      <ul>
        <li>Sub Title 3.1</li>
        <li>Sub Title 3.2</li>
      </ul>
    </div>
    <li class='logout'>TITLE 4</li>
  </ul>
</div>

FINISH.
Resource by: cdpn.io/ILegs
Bonus:
www.jacklmoore.com/notes/jquery-accordion-tutorial
designshack.net/tutorialexamples/cssaccordion/index.html
Happy coding \m/