u20 multiple divs D3

animated tabs with d3

by Igor Cuckovic

HTML

<button type="button" id="koprivnica" class="button">Koprivnica</button>
<button type="button" id="zagreb" class="button">Zagreb</button>
<button type="button" id="cakovec" class="button">Čakovec</button>
<button type="button" id="dugoSelo" class="button">Dugo Selo</button>
<button type="button" id="close">Close</button>
<div class="divs" style="height: 0px;"></div>

CSS

body {
    font-family: Helvetica, Arilal;
}
h2 {
    padding-left: 10px;
    text-shadow: .1em .1em .2em #000;
}
.rectangle, .divs {
    background-color: grey;
    width: 100%;
}
.divs {
    color: white;
    overflow: hidden;
}
#otherContent {
    background-color: steelblue;
    width: 100%;
    height: 400px;
}
#close {
    margin-left: 20px;
}
.hidden {
    display: none;
}

JavaScript

var cities = {
    koprivnica: "//www.dailymotion.com/embed/video/x2061ty?logo=0&info=0&quality=480&highlight=ff6a00",
    zagreb: "//www.dailymotion.com/embed/video/x2061mr?logo=0&info=0&quality=480&highlight=ff6a00",
    cakovec: "//www.dailymotion.com/embed/video/x2061qn?logo=0&info=0&quality=480&highlight=ff6a00",
    dugoSelo: "//www.dailymotion.com/embed/video/x20618l?logo=0&info=0&quality=480&highlight=ff6a00"
};

d3.selectAll('.button').on('click', function () {
    var id = d3.select(this).attr("id");
    addService(id);
});

d3.select('#close').on('click', function () {
    d3.select('.divs').transition().duration(400).style("height", 0 + 'px');
    d3.selectAll(".rectangle").remove();
});



var addService = function (id) {
    var timeoutID;
    if (parseFloat(d3.select('.divs').style('height'))) {

        console.log(d3.select(".rectangle").attr("id") === id);

        if (d3.select(".rectangle").attr("id") === "div" + id) {
            return;
        }

        d3.select('.divs').transition().duration(400).style("height", 0 + 'px');
        timeoutID = setTimeout(createDiv, 400);

    } else {

        createDiv();

    }

    function createDiv() {

        clearTimeout(timeoutID);
        d3.selectAll(".rectangle").remove();

        var selection = d3.select('.divs').append("div").attr({
            "id": 'div' + id,
                "class": "rectangle"
        });


        console.log(d3.select("#" + id).text());

        selection.append("h2").text(d3.select("#" + id).text());

        selection.append("iframe").attr({
            frameborder: "0",
            width: "480",
            height: "270",
            src: cities[id],
            allowfullscreen: "true"
        });


        var section = d3.select('.divs');
        var sectionHeight = parseFloat(selection.style('height'));

        section.transition()
            .duration(1000)
            .style('height', sectionHeight + 30 + 'px');
    }

};