Cacher is the code snippet organizer for pro developers

https://codyhouse.co/gem/css-multi-level-accordion-menu/
<?php
$catId = Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); 
$catName = Mage::getModel('catalog/layer')->getCurrentCategory()->getName(); 
?>


HTML+PHP+MAGENTO

<ul class="cd-accordion-menu">
	<li class="has-children">
		<input type="checkbox" name ="group-1" id="group-1" checked>
		<label for="group-1"><strong>PRODUCTS</strong></label>
 
  		<ul class="subitems">
			<li><a class="<?php echo ($catId == 15)  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/product-categories/body.html" >Body</a></li>
			<li><a  class="<?php echo ($catId == 26)  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/product-categories/facial.html">Facial</a></li>
			<li><a class="<?php echo ($catId == 76)  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/product-categories/body-treatment-kits.html">Professional Kits & Specials</a></li>
			<li><a class="<?php echo ($catId == 73)  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/product-categories/supplies.html">Supplies</a></li>
			<li><a class="<?php echo ($catId == '')  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/product-categories/new-products.html">New Products</a></li>
			<li><a class="<?php echo ($catId == 74)  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/product-categories/retail-products.html">Retail Products</a></li>

  		</ul>
	</li>

	<li class="has-children">
		<input type="checkbox" name ="group-1" id="group-2" checked>
		<label for="group-2"><strong>TREATMENTS</strong></label>
 
  		<ul class="subitems">
			<li><a class="<?php echo ($catId == '')  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/treatments-categories/facial.html">Facial</a></li>
			<li><a class="<?php echo ($catId == 46)  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/treatments-categories/body.html">Body</a></li>
			<li><a class="<?php echo ($catId == '')  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/treatments-categories/protocols.html">Protocols</a></li>
  		</ul>
	</li>


	<li class="has-children">
		<input type="checkbox" name ="group-3" id="group-3" checked>
		<label for="group-3"><strong>EQUIPMENT</strong></label>
 
  		<ul class="subitems">
			<li><a class="<?php echo ($catId == 91)  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/equipment/body-equipment.html">Body Equipment</a></li>
			<li><a class="<?php echo ($catId == 92)  ? actmenu : ''  ; ?>" href="http://popbetaserver.com/projects/slimspa/index.php/equipment/facial-equipment.html">Facial Equipment</a></li>

  		</ul>
	</li>
 

</ul> <!-- cd-accordion-menu -->



<style>
/*  Accordion Menu  */

.cd-accordion-menu input[type=checkbox] {
	/* hide native checkbox */
	position: absolute;
	opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
	position: relative;
	display: block;
	padding: 18px 18px 18px 0px;
	background: #fff;
	box-shadow: inset 0 -1px #555960;
	color: #000;
	font-size: 1.6rem;
}


.cd-accordion-menu ul {
	/* by default hide all sub menus */
	display: none;
}
 
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
	/* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
	/* show children when item is checked */
	display: block;
}

.actmenu { font-weight: bold; }
a.actmenu { color: #9bcb3e;  }


</style>