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

Spread your code soluces to the world

Love me
Solucior » JAVASCRIPT » Show hide DIV content with scrolling

Show hide DIV content with scrolling

05/18/2011 by Dux   -   3.8/5 (13 ratings)

Show and hide the contents of a DIV with a single function from a mouse event. The DIV unfolds and folds progressively through the setTimeout.
To use this script, run the function deplie() on an event with argument ID of the DIV in question.

You can set the DIV position to absolute not to move the below located content.

Demo.

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

source code



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

Tested with Safari  Google Chrome  Firefox3  Firefox4  IE6  
Rate this code     |     Copied : 271x

Comments for Show hide DIV content with scrolling

XRumerTest     04/08/2017 16:38
Hello. And Bye.
XRumerTest     04/03/2017 01:40
Hello. And Bye.
XRumerTest     03/28/2017 07:11
Hello. And Bye.
XRumerTest     03/18/2017 13:27
Hello. And Bye.
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
Add a comment Nickname
ZOOM


Div following the scrolling of the page
Show hide DIV content with scrolling
Simple image gallery PHP
Dynamic image resizing according to location
Zoom with CSS3
Simple method : listing files from a directory
Move dynamically a DOM objet up
Dynamically resizing height of textarea
Close HTML tags function
Scroll div with javascript