Hola, la verdad es que me rompí la cabeza hasta que me di cuenta del fallo tonto este
Esta mal hecho porque actúa ante un click general en el div en el que se aloja, en vez de en un área concreto.
Te dejo el JS con la solución y la lineas corregidas para que lo veas.
$(document).ready(function(){
/*expandir todos los bloques con la clase clsActivo y agregar la clase clsArriba a los
titulos de cada uno de esos bloques*/
$('.clsActivo').stop(true,true).slideToggle().parent().find('.clsSeccion').addClass('clsArriba');
/*buscamos el ultimo li, del ultimo ul y le agregamos la clase clsUltimo para redondear el
borde inferior*/
$('.clsContenedor').last('ul').find('li:last-child').addClass('clsUltimo');
/*agregamos la clase clsAbajo a todos los elementos del acordeon, que inicialmente
se muestren cerrados (sin la clase clsActivo)*/
$(".clsContenedor .clsSeccion ").not('[class$="clsArriba"]').addClass('clsAbajo');
/*evento que se dispara al hacer clic en cualquiera de los contenedores del acordeon*/
$('.clsContenedor span').click(function(){
/*mostramos u ocultamos la lista (ul) utilizando slideToggle*/
$(this).next().find('ul').stop(true,false).slideToggle('fast',function(){
//verificar la clase que tiene el titulo del contenedor
if($(this).parent().find('.clsSeccion').hasClass('clsAbajo')){
//eliminamos la clase clsAbajo y agregamos la clase clsArriba (para los iconos)
$(this).parent().find('.clsSeccion').removeClass('clsAbajo').addClass('clsArriba');
}else{
//eliminamos la clase clsArriba y agregamos la clase clsAbajo (para los iconos)
$(this).parent().find('.clsSeccion').removeClass('clsArriba').addClass('clsAbajo');
}
});
});
});
En vez de esperar a un click general del la clase .clsContenedor, este esperara a una click de un span que se aloje en un elemento que tenga esa clase. Así no actúa sobre todo el div, sino solo sobre el titulo.
La linea 15 he añadido el next(), para que seleccione el siguiente y así no se confunda consigo mismo xD.
También, te recomiendo que le añadas al CSS una linea con el siguiente contenido.
.clsContenedor ul li a {outline:none !important;}
La razón es, que al no cerrarse (que es lo que queremos), deja el focus sobre el link y queda un tanto feo.
Espero que te haya ayudado.
EDIT: Ahora si que me tengo que romper la cabeza por no leer a fondo el comentario de @lipman
Saludos
Autor
En línea
, solo el code habla por si solo para mi pero no se js asi que me lia 
