Glisser vers le bas et faites glisser jusqu'à la div sur cliquez sur

J'utilise le code suivant pour ouvrir et fermer une div ( glisser vers le haut/vers le bas ) à l'aide de js

J'ai le glisser vers le bas de l'événement associé à un bouton et de le glisser jusqu'à l'événement sttached à proximité de texte.

Ce que je veux, c'est le bouton onclick pour ouvrir et onclick nouveau fermez le couvercle de l'élément.

Voici le JS

//slide down effect

$(function(){
$('.grabPromo').click(function(){
var parent = $(this).parents('.promo');
$(parent).find('.slideDown').slideDown();
});
$('.closeSlide').click(function(){
var parent = $(this).parents('.promo');
$(parent).find('.slideDown').slideUp();
});
});

Le code HTML:

<span class="grabPromo">Open</span>

et dans la glisser vers le bas de la zone, j'ai

<a class="closeSlide">Close</a>

Toute aide appréciée.

Idéalement, je veux une flèche pointant en bas de la diapositive bouton bas et un en haut flèche vers le remplacer à glisser sur le même bouton. Et avec le lien étroit complètement.

Toute aide appréciée. Cheers

OriginalL'auteur 422 | 2011-03-12

  1. 10

    de l'essayer. il permet à plusieurs éléments n'est donc pas l'ID spécifique. et prend en charge tout le contenu chargé via AJAX. jsfiddle est ici

    <div class='toggle_parent'>
  <div class='toggleHolder'>
    <span class='toggler'>Open</span>
    <span class-'toggler' style='display:none;'>Close</span>
  </div>
  <div class='toggled_content' style='display:none;'>
      My Content
  </div>
</div>

    et 

    $('.toggler').live('click',function(){
  $(this).parent().children().toggle();  //swaps the display:none between the two spans
  $(this).parent().parent().find('.toggled_content').slideToggle();  //swap the display of the main content with slide action

});
    Parfait ! Juste ce que je recherchais , voté merci

    OriginalL'auteur FatherStorm

  2. 12

    Vous pouvez simplement utiliser slideToggle() dans la fonction de clic:

    $('.grabPromo').click(function(e){
    $('.slideDown').slideToggle();
});

    Voici une démo.

    OriginalL'auteur mVChr

  3. 6
    <div id="content">
bla bla bla bla bla bla bla bla blabla bla blabla bla bla
</div>
<input type="button" id="myButton" value="Slide down ↓"/>

$("#myButton").toggle(function(){
    $("#content").slideDown();
    $(this).val("Slide up ↑");
},function(){
    $("#content").slideUp();
    $(this).val("Slide down ↓")
});

    Démo en ligne: http://jsfiddle.net/amosrivera/AYWku/

    Démo avec span: http://jsfiddle.net/amosrivera/AYWku/1/

    Ce serait bien , mais je ne veux pas utiliser les boutons d'entrée. Nous sommes à l'aide de <span class="grabPromo">emparez-vous de Cette Affaire</span>
    haha nice symbole de la flèche.
    il n'a pas d'importance ce que le clic élément est, il vous a donné la fonctionnalité, vous pouvez modifier l'entrée d'une durée si vous le souhaitez, il a juste besoin d'avoir le même id....
    hehe merci, j'aime bien ceux-là, ils sont simples et le travail. @422 comme nick dit que la fonctionnalité ne s'appuient pas sur le type d'élément, mais j'ai ajouté un lien largeur de la plage de sorte que vous voyez le peu de différence.
    C'est cool, mais nous avons d'autres curseurs sur la page. Donc, ce serait l'économique (le code) de l'ajout de cette effet à d'autres div boutons , que vous êtes à l'aide de l'ID, je ne veux pas tous les boutons openeing en même temps lol.

    OriginalL'auteur amosrivera