JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<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="layers" id="testi"></div>
<div class="sanoma" id="ss">Sanoma</div>

CSS

div {
    background-color: #9999CC;
    border: 1px solid black;
    border-radius: 5px;
    text-align: center;
    font-size: 1.25em;
    position:relative;
    top:30px;
    left:10px;
    margin-bottom:50px;
}
.layers {
    width: 100px;
}
.sanoma {
    position:absolute;
    width:fit-content;
    left:130px;
    top:38px;
    background-color: #2299CC;
}
.k0, .k1, .k00, .k01, .k10, .k11, .k000, .k001, .k010, .k011, .k100, .k101, .k110, .k111 {
    position:absolute;
    width:fit-content;
    left:130px;
    background-color: #F2FFCC;
    top:113px;
}
.v0, .v1, .v00, .v01, .v10, .v11, .v000, .v001, .v010, .v011, .v100, .v101, .v110, .v111 {
    position:absolute;
    width:fit-content;
    left:130px;
    background-color: #22FF00;
    top:188px;
}
.l0, .l1, .l00, .l01, .l10, .l11, .l000, .l001, .l010, .l011, .l100, .l101, .l110, .l111 {
    position:absolute;
    width:fit-content;
    left:130px;
    background-color: #00FFFF;
    top:263px;
}
.f0, .f1, .f00, .f01, .f10, .f11, .f000, .f001, .f010, .f011, .f100, .f101, .f110, .f111 {
    position:absolute;
    width:fit-content;
    left:130px;
    background-color: #FF00FF;
    top:338px;
}

JavaScript

// fragmentointi yritys, ei ihan toimi

//var pituus = 0;
var alas = 110;
var testattava = "";

$(document).ready(function () {
    $('.sanoma').click(function () {
        $('.' + this.className).animate({
            top: alas
        });
        $('.' + this.className).fadeToggle(300);
        //pituus = 1;
        kapsuloi($(this), 'H5', 'sa');
    });
});

function kapsuloi(element, h, fi) {
    var kerrokset = ["k", "v", "l", "f"];
    var headerit = ['H4', 'H3', 'H2', 'H1'];
    var nextHeader = {
        'H5': 0,
        'H4': 1,
        'H3': 2,
        'H2': 3
    };
    var fragments = $(element).text().match(/.{1,2}/g);
    var paloja = fragments.length;
    var leveys = 0;
    var index = nextHeader[h];
    var ind = fi.match(/.$/g); // check last character

    for (var i = 0; i < paloja; i++) {
        // create fragment
        createDiv(fragments[i], kerrokset[index] + ind + i, headerit[index] + fi + 'frag' + i, paloja);
        $('#' + headerit[index] + fi + 'frag' + i).animate({
            left: 130 + leveys
        });
        leveys += $('#' + headerit[index] + fi + 'frag' + i).width();
        // create headers for each layer
        for (var j = 0; j < index+1; j++) {
            createDiv(headerit[j], kerrokset[index] +ind + i, kerrokset[index] + headerit[j] + fi + i, paloja);
            $('#' + kerrokset[index] + headerit[j] + fi + i).animate({
                left: 130 + leveys
            });
            leveys += $('#' + kerrokset[index] + headerit[j] + fi + i).width();
            //alert(kerrokset[index] + headerit[j] + i);
        }
    }
    //pituus += 1;
}

function createDiv(text, luokka, id, paloja) {
    d = document.createElement('div');
    //$('#testi').html(luokka);
    $(d).addClass(luokka)
        .html(text)
        .attr('id', id)
        .appendTo($("body"))
        .click(function () {
        var kerros = this.className.match(/^./g);
        //$('#testi').html(kerros != 'f');
        if (kerros != 'f') {
         ...