Aparecer determinada div

Galera, estou com o seguinte problema, tenho uma ul e suas li, quero que quando clicar em uma li ela abra seu determinado conteúdo e quando clicar no botão de esconder ele esconda o seu determinado conteúdo, eu fiz aqui mas não estou conseguindo fazer com que abra apenas o seu determinado conteúdo, abre todos.

html:

 <ul>
 <li class="abrir"><span>abrir</span>
 <div class="conteudo">
 HAHAHA
 <span clas="esconder"></span>
 </div>
 </li>
 <li class="abrir"><span>abrir</span>
 <div class="conteudo">
 HAHAHA
 <span clas="esconder"></span>
 </div>
 </li>
</ul>

script:

 function mostrar(){
 var $mostrar = $(".abrir span"),
 $esconder = jQuery(".esconder"),
 $texto = jQuery(".conteudo");

 $texto.hide();
 $mostrar.on("click", function(){
 $(".abrir").find('.conteudo').slideToggle('fast');
 });

 $esconder.on("click", function(){
 $('.conteudo').slideToggle('fast');
 });

 $mostrar.on("click", function(e){
 e.stopPropagation();
 });

 jQuery("body").on("click", function(){
 $texto.hide();
 });
 };

Alguem sabe como ajudar? lembrando que o click tem que ser no span dentro da li e não na li em si ;/