multiple divs D3

anumated tabs with d3

by Igor Cuckovic

HTML

<button type="button" id="one" class="button">One</button>
<button type="button" id="two" class="button">Two</button>
<button type="button" id="three" class="button">Three</button>
<button type="button" id="hide">Hide</button>

<div class="divs" style="height: 0px;">
    <div id="divone" class="rectangle hidden">div 1
        <img src="http://placekitten.com/400/150" />
    </div>
    <div id="divtwo" class="rectangle hidden">div 2
        <img src="http://placekitten.com/400/250" />
        </div>
    <div id="divthree" class="rectangle hidden">div 3
        <img src="http://placekitten.com/400/200" />
        </div>
</div>    

<div id="otherContent"> 
    <img src="http://placekitten.com/400/400" />
    Other Content</div>

CSS

.rectangle, .divs {
    background-color: darkred;
    width: 100%;
}

.divs {
    overflow: hidden;
}


#divone {
    height: 150px;
}

#divtwo {
    height: 250px;
}

#divthree {
    height: 200px;
}



#otherContent {
    background-color: steelblue;
    width: 100%;
    height: 400px;
}


.hidden {
    display: none;
}

JavaScript

d3.selectAll('.button').on('click', function (d) {
            var id = d3.select(this).attr("id");
    
            //console.log(id);
           showService(id);
});


d3.select('#hide').on('click', function () {
            hideService();
});



var showService = function (id) {
        var section = d3.select('.divs'); // container of all divs
        var hideAll = section.selectAll('.rectangle').classed('hidden', true);
        var selected = section.select('#div' + id).classed('hidden', false);

        var sectionHeight = parseFloat(selected.style('height'));

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



var hideService = function () {
        var el = d3.select('.divs');

            //el.selectAll('.rectangle').classed('hidden', true);
            el.transition()
                .duration(500)
                .style('height', '0px');
    
};



/*
d3.selectAll('.pie-arc path').on('click', function (d) {
            chargesNugget.nuggetChart.setSelectedService(this, d.data);
            showService(d);
});

d3.select('.selected-service .close .close-btn').on('click', function () {
            chargesNugget.nuggetChart.setSelectedService(null);
            hideService();
});


var showService = function (d) {
        var section = d3.select('.selected-service');
        section.selectAll('.service').classed('hidden', true);
        var selected = section.select('.service.' + d.data.id).classed('hidden', false);

        var sectionHeight = parseFloat(selected.style('height')) + parseFloat(section.select('.close').style('height'));

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

var hideService = function (instant) {
        var el = d3.select('.selected-service');

        if (instant) {
            el.style('height', '0px');
            el.selectAll('.service').classed('hidden', false);
        } else {
           ...