Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <dl>
    <dt>Lorem ipsum</dt>
    <dd>Dit is een dummy tekst die wordt gebruikt door veel webdesigners...</dd>
    
    <dt>Grumpy wizard...</dt>
    <dd>Deze dummy tekst wordt vaak gebruikt door typedesigners, aangezien deze zin alle letters van het alfabet bevat...</dd>
  </dl>
</body>
</html>
 
dd, dt, dl {
  margin: 0;
}
dt {
  font-weight: bold;
}
dd {
  height: 100px;
  display: none;
}
 
!function() {
  
  // window.requestAnimatieFrame is de nieuwste en beste functie
  // voor aniamties. Helaas is deze nog in beta mode, waardoor we
  // met prefixes moeten werken. Deze functie lost dit automatisch
  // voor ons op.
  // Zodra het helemaal niet ondersteund wordt wordt de standaard
  // tijd gebruikt, 1000/ 60 miliseconden.
  window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
  // zelfde als hierboven voor het stoppen van een animatie
  window.cancelAnimFrame = (function(){
      return  window.cancelAnimationFrame       || 
              window.webkitCancelAnimationFrame || 
              window.mozCancelAnimationFrame    || 
              window.oCancelAnimationFrame      || 
              window.msCancelAnimationFrame     || 
              function(requestID){
                window.clearTimeout(requestID);
              };
    })();
  
      // haal alle dt elementen op
  var dts = document.querySelectorAll('dt');
  
  // forEach loop in JavaScript
  [].forEach.call(dts, function(dt, i) {
    // zodra erop geklikt wordt
    dt.onclick = function(e) {
      // e komt van de parameter in het event (zie de callback functie)
      // met preventDefault() voorkomen we dat
      // de standaard actie => meteen laten zien
      // wordt uitgevoerd
      e.preventDefault();
      
      // this is het huidge element waarop geklikt
      // wordt.
      // haal het hierbij horende dd element op
      dd = this.nextElementSibling;
      
      // we beginnen met een height van 0
      height = 0;
      // we gaan naar een height van 100px
      toHeight = 100;
      
      // zet de height op de min height
      dd.style.height = height + 'px';
      // zet de display op block
      // element wordt toch nog niet zichtbaar
      // aangezien de height 0 is
      dd.style.display = 'block';
      // met overflow: hidden voorkomen we dat de tekst al zichtbaar wordt
      dd.style.overflow = 'hidden';
      
      // functie om te animeren
      function animate() {
        // ++var betekend variabel += 1
        // zolang deze kleiner of groter
        // is dan de max height gaan we door
        if (++height <= toHeight) {
          // set de height tot het volgende element
          dd.style.height = height + 'px';
          console.log(height);
          
          // maak een animate, roep deze function
          // om de x aantal miliseconden aan.
          // het browser bepaald wat het beste is
          // voor de vloeiendste animatie
          animatie = window.requestAnimFrame(animate);
        } else {
          // stop de animate
          window.cancelAnimFrame(animatie);
        }
      }
      
      // begin met animeren
      animate();
      
      return false;
    };
  });
  
}();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers