SlideUp SlideSown

Résolu
delaville81 Messages postés 209 Statut Membre -  
delaville81 Messages postés 209 Statut Membre -
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.
    RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    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. ♣
    0
  3. delaville81 Messages postés 209 Statut Membre
     
    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>
    *************************
    0
  4. delaville81 Messages postés 209 Statut Membre
     
    Merci,
    Cool avec slidetoglle, c'est mieux et plus court.

    Merci RAD ZONE et Waelb83 pour votre aide
    0