jQuery Div coulissant

Question

J'ai un div coulissant sur ma page qui utilise jQuery, je voudrais avoir plusieurs instances.

Au moment où il est ... scénario jQuery

$(document).ready(function(){ 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

$('.show_hide').click(function(){ 
$(".slidingDiv").slideToggle(); 
}); 

}); 

et mon lien/div est ...

<a href="#" class="show_hide" style="display: inline; ">test<span style="float:right;">+</span></a> 

<div class="slidingDiv" style="display: none; "> 
<div class="information-alert">test</div> 

Comment pourrais-je aller sur la création d'instances multiples? Merci

Answer 1

Je voudrais aller en changeant

$(".slidingDiv").slideToggle(); 

à

$(this).next().slideToggle(); 

qui signifie "slideToggle l'élément qui va juste après l'élément cliqué".

Voir this JSFiddle

Answer 2

Vérifiez la JQuery chaque méthode http://api.jquery.com/each/

Je ne sais pas exactement ce que vous voulez créer plusieurs instances de: slidingDiv, le lien show_hide? tous les deux?

Quoi qu'il en soit, je suis sûr que vous aurez besoin d'utiliser chaque méthode pour itérer sur vos multiples instances.

Answer 3

Essayer d'obtenir mon script pour travailler de telle sorte que lorsque le div de contact est vers le bas et vous cliquez sur-où, mais la div contact, il glissera vers le haut. Je sais que je vais à propos de ce mauvais j'espérais sur quelques conseils si possible merci.

Here is a link à ce que je fais.

$(document).ready(function() { 

    $("a.contact-btn").toggle(
       function() { 
       $("#contact").animate({"top": "0"}, 900, "linear"); 
       }, 
       function() { 
       $("#contact").animate({"top": "-450px"}, 900, "linear"); 
        }); 




    $('body').bind('click', function(e) { 

     var position = $('#contact').css('marginTop'); 

     if (position != '-450px') { 
      $("#contact").animate({"top": "-450px"}, 900, "linear"); 
      e.preventDefault(); 
      } 

      else if('#contact') { 
       $("#contact").animate({"top": "0"}, 900, "linear"); 
        } 
      });  
      });