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

Question

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

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I need to create an effect similar to that of this site here when clicking the product opens a div with the infos of it there I click on it again this div closes, but if I click on another product and the div has already opened it just changes the contents with the infos 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 it just the infos it closes and opens the div again.

Follow my js code:

$('.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>

Can I do this with the same slideToggle or do I have to use another feature?

UPDATE:

Add only an example of how the HTML code is not put it pq ta very large and has sections in PHP (theme wordpress).

UPDATE 2

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

javascript jquery

asked by anonymous 09.11.2017 / 00:59

2 answers

Internal DIV overlaps external correct sql query does not work in php

score 0 · Answer 1

You can define a class for your div and for your link, and use the and the next one, it's also worth seeing the this and $ (this) working of jquery, as already recommended. this $ (this)

$(".myLink").click(function () {
  $('.myDiv).hide();
  $(this).closest('.myDiv').next('.myDiv').slideToggle();
});

score 0 · Answer 2

You can create a class css to set an initial position and add this class and remove through the 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);
       }
   });