SlideUp SlideSown

Résolu/Fermé

delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024 - 21 oct. 2013 à 15:40
delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024 - 22 oct. 2013 à 17:58

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>
**********************

4 réponses

Réponse 1 / 4

Profil bloqué
22 oct. 2013 à 17:11

salut
pourquoi ne pas utiliser la fonction slidetoggle ?

Exemple :

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle

Réponse 2 / 4

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié par RAD ZONE le 21/10/2013 à 17:25

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. ♣

Réponse 3 / 4

delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024
22 oct. 2013 à 16:20

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>
*************************

Réponse 4 / 4

delaville81 Messages postés 188 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 12 avril 2024
22 oct. 2013 à 17:58

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

Merci RAD ZONE et Waelb83 pour votre aide

Newsletters