Creacion de menu acordeon

[mauricho]

Buenos dias. Estoy tratando de adaptar un menu acordeon a un slider de imagenes. Integrar, ya lo pude hacer, el menu se ve como un boton, y cuando uno aprieta despliega un submenu, con diferentes submenues, cuando uno apreta, el slider cambia.

Los errores, al apretar un submenu, el acordeon no vuelve a cerrarse.

Cuando cierro el acrodeon, manualmente, me vuelve al primer slider, estando en otro.

El codigo es.

Código:

( function( $ ) {
$( document ).ready(function() {
$(document).ready(function(){

$('#cssmenu > ul > li ul').each(function(index, e){
  $(e).closest('li').children('a');
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});

});

});
} )( jQuery );

Código:

<div id='cssmenu'>
<ul>
   <li class='has-sub'><a href='#'><span>Menu</span></a>
      <ul>
		<a href="#p_0" title="sub1"><li>1</li></a>
		<a href="#p_1" title="sub2"><li>2</li></a>
		<a href="#p_2" title="sub3"><li>3</li></a>
		<a href="#p_3" title="sub4"><li>4</li></a>
      </ul>
   </li>
</ul>
</div>

Código:

/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 250px;
}
#cssmenu > ul > li > a {
  padding-right: 40px;
  font-size: 25px;
  font-weight: bold;
  display: block;
  background: #bd0e36;
  color: #ffffff;
  border-bottom: 1px solid #5e071b;
  text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
  background: #ed1144;
  padding: 10px;
  display: block;
  font-size: 13px;
  font-weight: 300;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #fff;
}
#cssmenu > ul > li.active > a span {
  background: #bd0e36;
}
#cssmenu span.cnt {
  position: absolute;
  top: 8px;
  right: 15px;
  padding: 0;
  margin: 0;
  background: none;
}
/* Sub menu */
#cssmenu ul ul {
  display: none;
}
#cssmenu ul ul li {
  border: 1px solid #e0e0e0;
  border-top: 0;
}
#cssmenu ul ul a {
  padding: 10px;
  display: block;
  color: #ed1144;
  font-size: 13px;
}
#cssmenu ul ul a:hover {
  color: #bd0e36;
}
#cssmenu ul ul li.odd {
  background: #f4f4f4;
}
#cssmenu ul ul li.even {
  background: #fff;
}

Son todos los codigos. No lo hice yo, encontre algunos estandares y lo adapte, pero necesito arreglar lo que pido previamente.

SI alguien tiene alguno mas sencillo, y que no tenga los problemas como este, tambien acepto el aporte.

Muchas gracias.