slideToggle(); open and close by clicking on the same link, if you click on another just change content of the div

Asked

Viewed 1,156 times

4

I need to create an effect similar to that site here when you click on the product opens a div with the Infos of it then click on it again that div closes, but if I click on another product and the div has already opened it just changes the content with the instructions of the product that I clicked.

I’m trying to use slideToggle(); to do this, but when I click on another product instead of changing only the Infos it closes and opens the div again.

Follow my code 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>

I can do this effectWith the slideToggle itself or I have to use another resource?

UPDATE:

Add so an example of how ta the HTML code did not put it pq ta quite large and has snippets in PHP (wordpress theme).

UPDATE 2

the ID "dynamic value" is the same value as the rel of the element .

javascript jquery

  • can post html, to stay more

  • @Marcelobatista o html esta meio grande, eh a wordpress template, but I will edit and put an example like this. Vlw

  • No more html is hard to help. But there’s only one product-info for everyone ? Or each product has its own product-info ? The rel of <a> has what ?

  • @Isac but what is missing is only content, yes only has a product-into what changes is the container, cda product has its container. rel is the same value as id = "dynamic value".

2 answers

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>

You can set a class for your div and your link, and use the Closest and the next, also worth seeing the operation of this and $(this) jquery, as I’ve been recommended. this $(this)

  • Didn’t work out =/

  • basically what you want to do can you explain to me to help you

  • I want to do the effect that is found in the link that posted there above, clicked on the product opens the div with Infos, clicked on another product the Infos change, if you click on the same product that already has the Infos open to div with the Infos closes. Put here in my project, when I click on another product instead of changing only the Infos it closes and opens again with updated Infos, rest ta ok.

  • I made a change in response.

-1

You can create a css class to set an initial position and add that class and remove through jquery example:

$('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);
       }
   });

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.