Problema com efeito

Bom, estou com um probleminha aqui.. queria fazer um efeito em que ele aperecesse uma certa div, se coloco em #id ele funciona, mas como tenho mais que uma, teria que usar .Classe que não funcionou :ermm:.

JQuery:

$(document).ready(function(){
 $(".ocultar").click(function(event){
 event.preventDefault();
 $(".barInfo").hide(500);
 });

 $(".mostrar").click(function(event){
 event.preventDefault();
 $(".barInfo").show(500);
 });
});

HTML:

<li class="png_bg mostrar">
 <h1>Dolorsit consectur paramatis loremfrum consectur paramatis loremflorum ipsim.</h1>
 <div class="listItems">
 <img class="png_bg" src="img/to-do-listItem1.png" alt="img" />
 </div>
 <div class="info png_bg"></div> <span class="date">12 Jun</span>
 <div class="barInfo" style="display:none;"></div>
</li>

Obrigado.