Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » JAVASCRIPT » Cacher afficher un DIV avec scrolling

Cacher afficher un DIV avec scrolling

05/18/2011 par Dux   -   3.8/5 (13 notes)

Afficher et masquer le contenu d'un DIV avec une seule fonction à associer à un événement de souris. Le DIV se déplie et se replie progressivement grâce au setTimeout.
Pour utiliser ce script, lancez la fonction deplie() sur un événement avec comme argument l'ID du DIV en question.

Vous pouvez passer le DIV en position absolute pour ne pas faire bouger le contenu situé en-dessous.

Demo.

CLick here
text line
text line
text line
text line
text line
text line

code source



 
<script type="text/javascript">
var
haut_max, timer_glisse, action_glisse, haut_fenetre = "";

function
deplie(blid) {
   var
elm = document.getElementById(blid);
   if (
parseInt(elm.style.height) == 0 || !elm.style.height) {
       
elm.style.height = "auto";
       
elm.style.lineHeight = "120%";
       
init_glisse(blid, 'ouvre');
   } else if (
action_glisse == "") {
       
init_glisse(blid, "ferme");
   }
}

function
init_glisse(blid, sens) {
   var
elm = document.getElementById(blid);
   
   
haut_max = (document.getElementById(blid).offsetHeight) ? document.getElementById(blid).offsetHeight : document.getElementById(blid).style.pixelHeight;
   
   if (
sens == "ouvre") elm.style.height = "0px";
   
haut_fenetre = (document.body) ? document.body.clientHeight : window.innerHeight;
   
   
clearTimeout(timer_glisse);
   
timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);
}

function
glisse(blid, sens) {
   
action_glisse = 1;
   var
elm = document.getElementById(blid);
   var
haut = parseInt(elm.style.height);
   if (
sens == "ouvre") {
       
haut = haut + 10;
       if (
haut > haut_max) haut = haut_max;
   } else {
       
haut = haut - 10;
       if (
haut < 0) haut = 0;
   }
   
elm.style.height = haut + "px";
   
   if (
sens == "ouvre") {
       if (
haut < haut_max) {
           
timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);
       } else {
           
action_glisse = "";
       }
   } else {
       if (
haut > 0) {
           
timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);
       } else {
           
action_glisse = "";
           
elm.style.lineHeight = "0";
       }
   }
}
</script>

<!-- simple example -->
<h2 onclick="javascript:deplie('div1')">CLick here</h2>
<div id="div1" style="height: 0px; overflow:hidden; line-height: 0px">
   text<br />
   text<br />
   text<br />
   text<br />
   text<br />
   text<br />
</div>

<!-- example with position absolute -->
<a href="javascript:return(false)" onclick="javascript:deplie('div2')">CLick here</a>
<div id="div2" style="height: 0px; overflow:hidden; line-height: 0px; position:absolute; background: pink; z-index: 10">
   text line<br />
   text line<br />
   text line<br />
   text line<br />
   text line<br />
   text line<br />
</div>

Testé avec Safari  Google Chrome  Firefox3  Firefox4  IE6  
Noter ce code     |     Copié : 272x

Commentaires pour Cacher afficher un DIV avec scrolling

denial     04/24/2013 12:23
<script type="text/javascript">
var haut_max, timer_glisse, action_glisse, haut_fenetre = "";

function deplie(blid) {
  var elm = document.getElementById(blid);
  if (parseInt(elm.style.height) == 0 || !elm.style.height) {
      elm.style.height = "auto";
      elm.style.lineHeight = "120%";
      init_glisse(blid, 'ouvre');
  } else if (action_glisse == "") {
      init_glisse(blid, "ferme");
  }
}

function init_glisse(blid, sens) {
  var elm = document.getElementById(blid);
 
  haut_max = (document.getElementById(blid).offsetHeight) ? document.getElementById(blid).offsetHeight : document.getElementById(blid).style.pixelHeight;
 
  if (sens == "ouvre") elm.style.height = "0px";
  haut_fenetre = (document.body) ? document.body.clientHeight : window.innerHeight;
 
  clearTimeout(timer_glisse);
  timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);
}

function glisse(blid, sens) {
  action_glisse = 1;
  var elm = document.getElementById(blid);
  var haut = parseInt(elm.style.height);
  if (sens == "ouvre") {
      haut = haut + 10;
      if (haut > haut_max) haut = haut_max;
  } else {
      haut = haut - 10;
      if (haut < 0) haut = 0;
  }
  elm.style.height = haut + "px";
 
  if (sens == "ouvre") {
      if (haut < haut_max) {
          timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);
      } else {
          action_glisse = "";
      }
  } else {
      if (haut > 0) {
          timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);
      } else {
          action_glisse = "";
          elm.style.lineHeight = "0";
      }
  }
}
</script>

<!-- simple example -->
<h2 onclick="javascript:deplie('div1')">CLick here</h2>
<div id="div1" style="height: 0px; overflow:hidden; line-height: 0px">
  text<br />
  text<br />
  text<br />
  text<br />
  text<br />
  text<br />
</div>

<!-- example with position absolute -->
<a href="javascript:return(false)" onclick="javascript:deplie('div2')">CLick here</a>
<div id="div2" style="height: 0px; overflow:hidden; line-height: 0px; position:absolute; background: pink; z-index: 10">
  text line<br />
  text line<br />
  text line<br />
  text line<br />
  text line<br />
  text line<br />
</div>
rafi     04/10/2013 16:03
Idem pour afficher le code caché à l'ouverture de la page (et donc premier clic = fermer, 2nd clic=ouvert, etc)
rafi     04/10/2013 01:21
Salut. C'est très utile. J'ai cependant une question : dans quelle mesure peut-on introduire une fonction pour régler la vitesse du scrolling ?
Tortue     11/20/2011 15:30
Moi j'aimerai que le lien Click here change en close une fois le paragraphe ouvert. merci pour ce code
Calypso     11/07/2011 16:53
Code efficace: du temps de gagner! Merci!
super     06/14/2011 08:28
good code
Ajouter un commentaire Pseudo   Site
ZOOM


Div qui suit le scrolling de la page
Cacher afficher un DIV avec scrolling
Remonter haut de page
Loupe image javascript
Zoom infini CSS3 et Javascript
Largeur image dynamique selon son emplacement
Zoom en CSS3
Déplacer un objet DOM vers le haut
Scroll div avec javascript
Fonction pour fermer les balises HTML