Edit in JSFiddle

Result
JavaScript
HTML
CSS

// Kapsulointiesimerkki
// 25.3.2015 added example relation to real protocols
// 15.3.2016 poistetaan H1 myös kytkimessä
// 29.3.2016 pienennetty kerrosten välejä että näkyy paremmin pienellä näytöllä + real protocols examplea muokataan myös silloin kuin headereitä poistetaan
// 10.1.2018 Kavennettu, jotta mahtuisi 768 pikseliä leveeseen TIM-sivuun
// TODO: siisti koodia, jos jaksat, vois yksinkertaistaa

var alas = 50;
var testattava = "";
var leveys = 0;
var kerros = 'H5';
var tila = 0;
var orig = '| GET / HTTP/1.1 jne. |';
var protot = ['|TCP portit 80 jne|', '|IP osoiteet ja otsikot |', '|MAC osoitteet|', '|Muunnos fyysiseksi signaaliksi|'];
var nextHeader = {
  'H5': 0,
  'H4': 1,
  'H3': 2,
  'H2': 3
};

$(document).ready(function() {
  $('.sanoma').click(function() {
    if (kerros != 'H5') {
      kliku(this);
    } else {
      $('.' + this.className).animate({
        top: 30 + alas
      });
      leveys += $(this).width();
      kapsuloi($(this), kerros);
    }
  });
});

function kapsuloi(element, h) {
  var kerrokset = ["k", "v", "l", "f"];
  var headerit = ['H4', 'H3', 'H2', 'H1'];
  var index = nextHeader[h];
  //$("#result").html(protot[index] + $("#result").html());
  //$("#result").html(orig + protot.slice(0, index+1).join(""));
  $("#result")
    .delay(1000)
    .queue(function(n) {
      $(this).html(orig + protot.slice(0, index + 1).join(""));
      n();
    })
    // create header
  createDiv(headerit[index], 'sanoma', kerrokset[index] + headerit[index]);
  $('#' + kerrokset[index] + headerit[index]).animate({
    left: 85 + leveys // Mihin kohtaan suhteessa sanomaan tulee headerit
  });
  leveys += $('#' + kerrokset[index] + headerit[index]).width();
  kerros = headerit[index]; // update what layer we are on
}

function createDiv(text, luokka, id) {
  d = document.createElement('div');
  var paljon = {
    'H4': 50,
    'H3': 100,
    'H2': 150,
    'H1': 200
  };
  var vari = {
    'H4': '#F2FFCC',
    'H3': '#22FF00',
    'H2': '#00FFFF',
    'H1': '#FF00FF'
  };

  $(d).addClass(luokka)
    .html(text)
    .attr('id', id)
    .css({
      top: 30 + paljon[text] + 'px',
      'background-color': vari[text]
    })
    .appendTo($("body"))
    .click(function() {
      kliku(this);
    })
    .hide()
    .delay(300)
    .slideToggle(300);
}

function tesi(element, vas, alas, kuka) {
  $('.' + element.className).each(function() {
    //$('#testi').html(vas);
    $(this).animate({
      left: vas,
      top: alas
    });
  });
  $(kuka).fadeToggle(300);
}

function kliku(element) {
  var paljon = {
    'H4': 80,
    'H3': 130,
    'H2': 180,
    'H1': 230
  };
  if (kerros != 'H1') {
    $('.' + element.className).animate({
      top: alas + paljon[kerros]
    });
    kapsuloi($(element), kerros);
  } else {
    var hederit = ["#fH1", "#lH2", "#vH3", "#kH4"];
    switch (tila) {
      case 0:
        // poistetaan H1 kytkimessä
        tesi(element, "+=70", "+=0", "#fH1");
        tila = 1;
        //$("#result").html(orig + protot.slice(0, 3).join(""));
        $("#result")
          .delay(1000)
          .queue(function(n) {
            $(this).html(orig + protot.slice(0, 3).join(""));
            n();
          })
        break;
      case 1:
        // link layer
        tesi(element, "+=0", "-=50", "");
        tila = 2;
        break;
      case 2:
        tesi(element, "+=155", "+=0", "");
        tila = 3;
        break;
      case 3:
        tesi(element, "+=0", "+=50", "#fH1");
        //$("#result").html(orig + protot.slice(0, 4).join(""));
        $("#result")
          .delay(1000)
          .queue(function(n) {
            $(this).html(orig + protot.slice(0, 4).join(""));
            n();
          })
        tila = 4;
        break;
      case 4:
        tesi(element, "+=70", "+=0", "#fH1");
        //$("#result").html(orig + protot.slice(0, 3).join(""));
        $("#result")
          .delay(1000)
          .queue(function(n) {
            $(this).html(orig + protot.slice(0, 3).join(""));
            n();
          })
        tila = 5;
        break;
      case 5:
        tesi(element, "+=0", "-=50", "#lH2");
        //$("#result").html(orig + protot.slice(0, 2).join(""));
        $("#result")
          .delay(1000)
          .queue(function(n) {
            $(this).html(orig + protot.slice(0, 2).join(""));
            n();
          })
        tila = 6;
        break;
        // ei poisteta H3 headeriä reitittimessä    
      case 6:
        tesi(element, "+=0", "-=50", "");
        tila = 7;
        break;
      case 7:
        tesi(element, "+=150", "+=0", "");
        tila = 8;
        break;
      case 8:
        tesi(element, "+=0", "+=50", "#lH2");
        //$("#result").html(orig + protot.slice(0, 3).join(""));
        $("#result")
          .delay(1000)
          .queue(function(n) {
            $(this).html(orig + protot.slice(0, 3).join(""));
            n();
          })
        tila = 9;
        break;
      case 9:
        tesi(element, "+=0", "+=50", "#fH1");
        //$("#result").html(orig + protot.slice(0, 4).join(""));
        $("#result")
          .delay(1000)
          .queue(function(n) {
            $(this).html(orig + protot.slice(0, 4).join(""));
            n();
          })
        tila = 10;
        break;
      case 10:
        tesi(element, "+=105", "+=0", "#fH1");
        //$("#result").html(orig + protot.slice(0, 3).join(""));
        $("#result")
          .delay(1000)
          .queue(function(n) {
            $(this).html(orig + protot.slice(0, 3).join(""));
            n();
          })
        tila = 11;
        break;
      case 11:
        tesi(element, "+=0", "-=50", "#lH2");
        //$("#result").html(orig + protot.slice(0, 2).join(""));
        $("#result")
          .delay(1000)
          .queue(function(n) {
            $(this).html(orig + protot.slice(0, 2).join(""));
            n();
          })
        tila = 12;
        break;
      case 12:
        tesi(element, "+=0", "-=50", "#vH3");
        //$("#result").html(orig + protot.slice(0, 1).join(""));
        $("#result")
          .delay(1000)
          .queue(function(n) {
            $(this).html(orig + protot.slice(0, 1).join(""));
            n();
          })
        tila = 13;
        break;
      case 13:
        tesi(element, "+=0", "-=50", "#kH4");
        //$("#result").html(orig);
        $("#result")
          .delay(1000)
          .queue(function(n) {
            $(this).html(orig);
            n();
          })
        tila = 14;
        break;
      case 14:
        tesi(element, "+=0", "-=50", "#sH5");
        tila = 15;
        break;
      default:
        alert('end');
        break;
    }
  }
}

<div class="teksti" id="a">Lähettäjä</div>
<div class="teksti" id="b">Kytkin</div>
<div class="teksti" id="c">Reititin</div>
<div class="teksti" id="d">Vastaanottaja</div>
<div class="layers" id="item1">Sovellus</div>
<div class="layers" id="item2">Kuljetus</div>
<div class="layers" id="item3">Verkko</div>
<div class="layers" id="item4">Linkki</div>
<div class="layers" id="item5">Fyysinen</div>
<div class="sanoma" id="ss">Sanoma</div>
<div class="layers2" id="item6">Linkki</div>
<div class="layers2" id="item7">Fyysinen</div>
<div class="layers3" id="item8">Verkko</div>
<div class="layers3" id="item9">Linkki</div>
<div class="layers3" id="item10">Fyysinen</div>
<div class="layers4" id="item11">Sovellus</div>
<div class="layers4" id="item12">Kuljetus</div>
<div class="layers4" id="item13">Verkko</div>
<div class="layers4" id="item14">Linkki</div>
<div class="layers4" id="item15">Fyysinen</div>
<div class="res">
  <p id="result">| GET / HTTP/1.1 jne. |</p>
</div>

div {
  background-color: #9999CC;
  border: 1px solid black;
  border-radius: 5px;
  text-align: center;
  font-size: 1em;
  position: relative;
  top: 30px;
  left: 10px;
  margin-bottom: 50px;
}

.teksti {
  background-color: #FFFFFF;
  position: absolute;
  top: 0px;
  width: 75px;
  font-size: 0.9em;
}

.layers,
.layers2,
.layers3,
.layers4 {
  position: absolute;
  width: 75px;
}

.layers,
#a {
  left: 5px;
}

.layers2,
#b {
  left: 235px;
}

.layers3,
#c {
  left: 455px;
}

.layers4,
#d {
  left: 685px;
}

#item5,
#item7,
#item10,
#item15 {
  top: 230px;
}

#item4,
#item6,
#item9,
#item14 {
  top: 180px;
}

#item3,
#item8,
#item13 {
  top: 130px;
}

#item2,
#item12 {
  top: 80px;
}

#item1,
#item11 {
  top: 30px;
}

.sanoma {
  position: absolute;
  width: fit-content;
  left: 85px;
  top: 30px;
  background-color: #2299CC;
}

.k,
.v,
.l,
.f {
  position: absolute;
  width: fit-content;
  left: 110px;
  background-color: #F2FFCC;
  top: 105px;
}

.res {
  top: 300px;
  width: 740px;
}