Zeitstrahl mit klappbarem Baum und Multilanes

by Daniel Suess

HTML

<h1>Blaue Bereiche sind klickbar</h1>

<div class="collapsable">Center 1
    <div class="collapsable">Kat 1
        <div class="collapsable">AA
            <div>AA.1
                <div class="bars overbook-1x">
                    <div class="bar ev1">Mein Event</div>
                    <div class="bar ev2">Weiteres Event</div>
                    <div class="bar ev3">Ostern</div>
                </div>
            </div>
            <div>AA.2</div>
            <div>AA.3</div>
            <div>AA.4
                <div class="bars overbook-1x">
                    <div class="bar ev1">Mein Event</div>
                    <div class="bar ev2">Weiteres Event</div>
                    <div class="bar ev3">Ostern</div>
                </div>
            </div>
        </div>
        <div class="collapsable">BB
            <div>BB.1</div>
            <div>BB.2</div>
            <div>BB.3</div>
            <div>BB.4</div>
        </div>
        <div class="collapsable">CC
            <div>CC.1</div>
            <div>CC.2</div>
            <div>CC.3</div>
            <div>CC.4</div>
        </div>
    </div>
    <div class="collapsable">Kat 2
        <div class="collapsable">BB
            <div>BB.1</div>
            <div>BB.2</div>
            <div>BB.3
                <div class="bars overbook-2x">
                    <div class="bar ev4">Angebot 1</div>
                    <div class="bar ev5">Angebot 2</div>
                    <div class="bar ev6">Angebot 3</div>
                </div>
            </div>
            <div>BB.4</div>
        </div>
    </div>
</div>
<div class="collapsable">Center 2
    <div class="collapsable">Kat 1
        <div class="collapsable">AA
            <div>AA.1</div>
            <div>AA.2</div>
            <div>AA.3</div>
            <div>AA.4</div>
        </div>
        <div class="collapsable">BB
            <div>BB.1</div>
            <div>BB.2</div>
            <div>BB.3</div>
            <div>BB.4</div>
        </div>
       ...

CSS

* {
    box-sizing: border-box;
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div {
    line-height: 34px;
    background-color: rgba(00, 0, 255, 0.2);
    border: 1px solid white;
    padding-left: 2em;
    /*text cut off*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.collapsable {
    border-right: none;
    cursor: pointer;
}
:not(.collapsable) {
    cursor: default;
    background: lightgray;
}
.collapsed {
    background-color: rgba(100, 100, 100, 0.5);
}
.collapsed * {
    display: none;
}
.bars {
    display: inline;
    height: 100%;
    background: none;
    border: none;
}
.bars.overbook-1x {
    line-height: 68px;
}
.bars.overbook-2x {
    line-height: 102px;
}
.bar {
    display: inline;
    background-color: rgba(255, 255, 0, 0.3);
    padding: 3px;
    position: absolute;
    height: 34px;
}
.ev1 {
    width: 60px;
    transform: translate(20px, 0);
}
.ev2 {
    width: 80px;
    transform: translate(200px, 0);
}
.ev3 {
    width: 50px;
    transform: translate(250px, 34px);
}
.ev4, .ev5, .ev6 {
    width: 200px;
}
.ev4 {
    transform: translate(250px, 0);
}
.ev5 {
    transform: translate(250px, 34px);
}
.ev6 {
    transform: translate(250px, 68px);
}

JavaScript

$('.collapsable').on('click', function (e) {
    $(this).toggleClass('collapsed');
    e.stopPropagation();
});