JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div id="divline" style="float:left;">
    <div id="jqChart2" class="charts">chart 1</div>
</div>

<div id="divbar" style="float:left">
    <div id="jqChartb2" class="charts">chart 2</div>
</div>
<div id="toggle_button1">toggle 1</div>
<div id="toggle_button2">toggle 2</div>

CSS

#toggle_button1{
    display:block;
    width:100px;
}
#toggle_button2{
    display:none;
    width:100px;
}
#divline{
    display:block;
}
#divbar{
    display:none;
}

JavaScript

$("#toggle_button1").click(function(){
    $("#toggle_button1").css({'display':'none'});
    $("#toggle_button2").css({'display':'block'});
    $("#divline").css({'display':'block'});
    $("#divbar").css({'display':'none'});
});

$("#toggle_button2").click(function(){
    $("#toggle_button2").css({'display':'none'});
    $("#toggle_button1").css({'display':'block'});
    $("#divline").css({'display':'none'});
    $("#divbar").css({'display':'block'});
});