Preciso criar um efeito parecido com desse site aqui quando clica no produto abre uma div com as infos dele ai se clico nele de novo essa div fecha, porem se eu clicar em outro produto e a div ja tiver aberta ele apenas altera o conteudo com as infos do produto que cliquei.
Eu estou tentando usar o slideToggle(); para fazer isso, mas quando eu clico em outro produto em vez de mudar so as infos ele fecha e abre a div de novo.
Segue meu código js:
$('.menu li a').on('click', function() {
var target = $(this).attr('rel');
$("#" + target).slideToggle().siblings(".product-info").hide();
});
/* Exemplo de como ta o codigo HTML */
<div>
<div id="Valor Dinamico" class="product-info">
<div class="container"></div>
</div>
</div>
Consigo fazer esse efeito comm o slideToggle mesmo ou tenho que usar outro recurso?
UPDATE:
Add so um exemplo de como ta o codigo HTML não coloquei ele pq ta bem grande e tem trechos em PHP (tema wordpress).
UPDATE 2
o ID "valor dinâmico" é o mesmo valor do rel do elemento .
product-info
para todos ? Ou cada produto tem o seuproduct-info
? Orel
do<a>
tem o que ?