SlideUp SlideSown

Résolu
delaville81 -  
Chers confrères,
Débutant en jquery, je cherche le moyen de pouvoir en cliquant sur le même lien pouvoir afficher ou masquer la div (#d1).

mon code pour le moment avec un lien sur image et un lien sur texte
********************
<script type="text/javascript">
$ ("#b1").click(function() {
$("#d1").slideDown(1000);
});
$ ("#bhide").click(function() {
$("#d1").slideUp(800);
});
</script>
**********************



--
Bien PHPment et MySQLment
Delaville

4 réponses

  2. delaville81 Auteur
    Merci,
    Cool avec slidetoglle, c'est mieux et plus court.

    Merci RAD ZONE et Waelb83 pour votre aide
    1. delaville81 Auteur
      Merci RAD ZONE,
      Ton code marche bien mais je n'arrive pas à l'adapter au mien.
      Le lien qui déclenche le slidedown est une image dans une div.

      Mon souci vient du html

      Mon code HTML

      *************************
      <div id="div4">
      <a href="#"></a>
      <img src="images/interface_04.png" id="b1" />
      <div id="d1">
      <br />
      <form method="post" action="index.php">
      Login : <br />
      <input type="text" name="login" value="" size="30" />
      <br /><br />
      Mot de passe : <br />
      <input type="password" name="mdp" value="" size="30" />
      <br />
      <input type="submit" name="valider" value="valider" />
      </form>
      <p id="bhide"><a href="#">Fermer</a></p>
      </div>

      </div>
      *************************
      1. RAD ZONE Contributeur
        salut voila ce qu il faut faire !

        JS 

        $(document).ready(function() {

        $("#ouvrir").click(function(){
        $("div#d1").slideDown("slow");

        });

        $("#fermer").click(function(){
        $("div#d1").slideUp("slow");
        });
        /* POUR CHANGER LE LIEN  */
        $("#change a").click(function () {
        $("#change a").toggle();
        });

        });


        html 

        <p id="change">
        <a id="ouvrir" href="#">ouvrir</a>
        <a id="fermer" class="lien2" href="#">fermer</a>
        </p>

        CSS 
        a.lien2 {
        display: none;   /* pour cacher le "lien2" */
        }

        ou plus simple avec Toggle 
        <!DOCTYPE html>
        <html>
          <head>

            <style type="text/css">
        /*<![CDATA[*/
            #d1 {
              display: none;   /* pour cacher la div */
            }
            /*]]>*/
            </style>
            <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
        </script>
            <script>
        $(document).ready(function(){
                $("#b1").click(function () {
                $("#d1").slideToggle("slow");
               });
            });
            </script>
            <title></title>
          </head>
          <body>
            <a href='#' id="b1">lien</a>
            <div id="d1">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Expectoque quid ad id, quod quaerebam, respondeas.
                <strong>Quorum altera prosunt, nocent altera.</strong> Quare ad ea primum, si videtur; Callipho ad virtutem
                nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Ergo instituto veterum, quo etiam Stoici utuntur,
                hinc capiamus exordium. Duo Reges: constructio interrete. Primum Theophrasti, Strato, physicum se voluit;
                <strong>Omnia peccata paria dicitis.</strong>
              </p>
              <p>
                Si longus, levis; Sed quid attinet de rebus tam apertis plura requirere? Maximas vero virtutes iacere omnis
                necesse est voluptate dominante. Tum ille: Ain tandem? <mark>Itaque his sapiens semper vacabit.</mark>
                <em>Stoicos roga.</em>
              </p>
            </div>
          </body>
        </html>
        a+

        ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣