JSFiddle - React, Tailwind, and code Playground

by Igor Cuckovic

HTML

<button type="button" id="button1" class="button">One</button>
<button type="button" id="button2" class="button">Two</button>
<button type="button" id="button3" class="button">Three</button>
<button type="button" id="hide">Hide</button>

<div id="one" class="rectangle hidden">div 1</div>
<div id="two" class="rectangle hidden">div 2</div>
<div id="three" class="rectangle hidden">div 3</div>

<div id="otherContent">  Other Content</div>

CSS

.rectangle, #one, #two, #three {
    background-color:#b0c4de;
    width: 100%;
}

#one {
    height: 150px;
}

#two {
    height: 250px;
}

#three {
    height: 200px;
}



#otherContent {
    background-color:#cc0000;
    width: 100%;
    height: 200px;
}


.hidden {
    display: none;
}

JavaScript

var button1 = d3.select("#button1");
var button2 = d3.select("#button2");
var button3 = d3.select("#button3");

button1.on("click", function () {
    
    d3.selectAll("#one")
            .transition()
            .duration(400)
            .style("height", "150px")
            .attr("class", "active rectangle");
    
    d3.selectAll("#two").attr("class", "hidden rectangle"); 
    
    d3.selectAll("#three").attr("class", "hidden rectangle");     
});

button2.on("click", function () {
    
    d3.selectAll("#one").attr("class", "hidden rectangle"); 
   
    d3.selectAll("#two")            
            .transition()
            .duration(400)
            .style("height", "250px")
            .attr("class", "active rectangle");
    
    d3.selectAll("#three").attr("class", "hidden rectangle");     
});

button3.on("click", function () {
    
    d3.selectAll("#one").attr("class", "hidden rectangle"); 
    
    d3.selectAll("#two").attr("class", "hidden rectangle"); 
    
    d3.selectAll("#three").attr("class", "active rectangle");     
});

d3.select("#hide").on("click", function () {
    hidePannel();
});

var hidePannel = function () {
    var el = d3.select('.rectangle');
              
        el.transition()
                .duration(400)
                .style('height', '0px');
 
    
            //console.log("asdf");

};


/*
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')) +...