4

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 .

4
  • poder postar o html, para ficar mais functional 9/11/2017 às 0:29
  • @MarceloBatista o html esta meio grande, eh um template de wordpress, mas vou editar e colocar um exemplo de como esta. Vlw
    – user27585
    9/11/2017 às 0:41
  • Sem mais html é difícil de ajudar. Mas só há um product-info para todos ? Ou cada produto tem o seu product-info ? O rel do <a> tem o que ?
    – Isac
    9/11/2017 às 1:06
  • @Isac mas o que falta é so conteudo, sim so tem um product-into o que muda é o container, cda produto tem seu container. O rel é o mesmo valor do id = "valor dinamico".
    – user27585
    9/11/2017 às 21:52

2 Respostas 2

0

$( "ul > li" ).click(function() {
  $(".product-info").slideToggle('slow')
})
div.product-info{
  background-color:red;
  padding:1rem;
  margin:1rem;
  color:#fff;
  font-weight:bold;
  text-align:center;
  display:none;
}

div.product-info p{
  margin:0;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

  <div class="menu">
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
  </div>
    <div class="product-info">
        <p>Loren ipsum....m Loren ipsum....,Loren ipsum....</p>
    </div>


</body>
</html>

Voce pode definir uma class para sua div e para seu link, e usa o closest e o next, tambem vale a pena ver o funcionamento do this e do $(this) do jquery, como ja me recomendaram. this $(this)

4
  • Não deu certo =/
    – user27585
    12/11/2017 às 23:00
  • basicamente o que voce quer fazer pode me explicar para ajuda-lo 12/11/2017 às 23:29
  • Quero fazer o efeito que se encontra no link que postei la em cima, clicou no produto abre a div com infos, clicou em outro produto as infos mudam, se clicar no mesmo produto que ja tem as infos aberta a div com as infos fecha. Porem aqui no meu projeto, quando eu clico em outro produto em vez de mudar so as infos ela fecha e abre novamente com as infos atualizadas, de resto ta ok.
    – user27585
    12/11/2017 às 23:34
  • Fiz um alteração no resposta. 25/07/2019 às 0:56
-1

Você pode criar uma class css para definir uma posição inicial e adiciona essa classe e remover através do jquery exemplo:

$('div ou botão a ser clicado').click(function(){
       if(!$(this).hasClass('classe-criada-no-css')){
           $(this).addClass('classe-criada-no-css');
           $('div que recebera a ação').animate({'left': '0px'},300);
       }else{
          $(this).removeClass('classe-criada-no-css');
          $('div que recebera a ação').animate({'left': '-100%'}, 300);
       }
   });

Você deve fazer log-in para responder a esta pergunta.