Abrir e Fechar DIV

Bom dia

tenho o seguinte código

<div class="produtos">

 <div class="produtos-box clean-fix">

 <img src="img/sj/caldeirao.jpg" width="186" height="186">

 <div class="detalhes-btn v-btn">
 <p>Informações</p>
 </div>

 <div class="produtos-box-info">
 <div class="titulo-produto">
 <div class="fechar"></div>
 </div>

 <div class="conteudo">
 <iframe class="iframe" src="infor/caldeirao.html"></iframe>
</div>

</div>
</div>
</div><!--produtos-->

eu clico na div produtos-box e exibo a div produto-box-info , que por padrão e hidden.

$(".produtos-box").click(function(){
 $(this).children(".produtos-box-info").show();
 });

e dentro da div produto-box-info eu tenho uma div .fechar a qual seria pra fechar a mesma div a qual ela pertence, no caso a .produto-box-info

 $(".fechar").click(function(){
 $(this).children(".produtos-box-info").hide();
 });

só que por questões de hierarquia a div .fechar não funciona, seu eu colocar a div .fechar como fora da div .produtos, ai ela funciona! então como faço pra que ela funciona estando onde ela está ? tenho que relacionar ela com as outras divs ? se sim como?

pra quem quiser ver funcionando : http://catalogo.reidoaluminio.com.br/ o primeiro produto da linha hotel.

aproveitando o tópico, usando este mesmo código, como faço pra quando a div .produto-box-info estiver ativa e se a pessoa abrir outra essa que estava aberta fecha?

pro que eu quero fazer eu tenho que usar .show e .hide , toggle não funciona pra mim, pois dentro dessa div de informação eu exibo um iframe que tem scroll, e usando toggle esse scroll aparece na primeira vez que abre, já na segunda o scroll some! Já com show/hide o scroll funciona direitinho.