<div class="bg"></div>
    <!-- partial:index.partial.html -->
    <div class="container">
        <div class="section">
            <ul>
                <li>
                    <div class="box" id="ceo" onclick="this.classList.toggle('enlarged');">
                        <div class="information">
                            <div class="position">
                                <p>CEO</p>
                            </div>
                            <div class="additionalInfo">
                                This is the CEO he basically runs things round here. If you want a promotion, make him a coffee and ask about his cats.
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <ul class="children">
                        <li>
                            <div class="box" id="manager1" onclick="this.classList.toggle('enlarged');">
                                <div class="information">
                                    <div class="position">
                                        <p>Manager 1</p>
                                    </div>
                                    <div class="additionalInfo">
                                        This is manager 1 he is kinda annoying sometimes but as long as you do your paperwork and stay away from his stapler you'll be fine.
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="box" id="manager2" onclick="this.classList.toggle('enlarged');">
                                <div class="information">
                                    <div class="position">
                                        <p>Manager 2</p>
                                    </div>
                                    <div class="additionalInfo">
                                        This is manager 2, she is kind but will eat anything you leave in the fridge for longer than a day so BEWARE.
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <ul class="children">
                        <li>
                            <div class="box" id="child1" onclick="this.classList.toggle('enlarged');">
                                <div class="information">
                                    <div class="position">
                                        <p>Child 1</p>
                                    </div>
                                    <div class="additionalInfo">
                                        This is a child of manager 2, they basically just do all our paper work.
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="box" id="child2" onclick="this.classList.toggle('enlarged');">
                                <div class="information">
                                    <div class="position">
                                        <p>Child 2</p>
                                    </div>
                                    <div class="additionalInfo">
                                        This is a child of manager 2, they basically just do all our paper work.
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <div id="log"></div>
    <!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js'></script>
    <script src="./script.js"></script>
.container {
    width: 100%;
    height: 100%;
    text-align: center;
}

.box {
    display: inline-block;
    color: black;
    width: 80%;
    max-width: 300px;
    height: 50px;
    text-decoration: none;
    text-align: center;
    border: 2px solid #333;
    -webkit-transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;
    background: #EEE;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    position: relative;
}

.information {
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}

.additionalInfo {
    padding: 15px;
}

.position {
    display: table-row;
    vertical-align: middle;
    height: 50px;
    font-weight: 700;
    font-size: 0.5;
}

.section ul {
    padding: 0px;
    list-style-type: none;
    display: inline-block;
    height: 100%;
}

.section li {
    margin-top: 50px;
    height: 100%;
}

.children ul {
    display: inline-block;
    padding: 0;
    overflow: hidden;
    text-align: center;
    height: 100%;
}

h4 {
    margin-block-start: 1em;
}

.children li {
    float: left;
    width: 50%;
}

._jsPlumb_connector {
    z-index: 1;
}

._jsPlumb_overlay {
    z-index: 1;
}

.enlarged {
    height: 300px !important;
    width: 90% !important;
}

.enlarged additionalInfo {
    opacity: 0.2;
}

li {
    height: 50px;
}

body {
    font-family: helvetica;
}

.bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    z-index: 0;
    background-image: linear-gradient(#bc4e9c, #B06AB3);
    background-repeat: no-repeat;
    background-size: cover;
}

var instance;
var draws = 0;

jsPlumb.bind("ready", function() {

    instance = jsPlumb.getInstance({
        PaintStyle: {
            lineWidth: 2,
            strokeStyle: "#444",
            outlineColor: "#444",
            outlineWidth: 1
        },
        Connector: ["Flowchart"],
        Endpoint: ["Blank", { radius: 3 }],
        EndpointStyle: { fillStyle: "#333" },
    });

    $(window).resize(function() {
        instance.repaintEverything();
    });

    drawConnections();

});

function drawConnections() {
    draws++;
    instance.connect({
        source: "ceo",
        target: "manager1",
        scope: "someScope",
        anchor: ["Bottom", "Top"]
    });
    instance.connect({
        source: "ceo",
        target: "manager2",
        scope: "someScope",
        anchor: ["Bottom", "Top"]
    });
    instance.connect({
        source: "manager2",
        target: "child1",
        scope: "someScope",
        anchor: ["Bottom", "Top"]
    });
    instance.connect({
        source: "manager2",
        target: "child2",
        scope: "someScope",
        anchor: ["Bottom", "Top"]
    });
}

window.setInterval(function() {
    instance.repaintEverything();
}, 20);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.