JSFiddle - React, Tailwind, and code Playground

by CJohn

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<body>
  <input type="checkbox" id="trig">
  <label for="trig" class="btn-layout">Toggle for Shrinking and Expanding Chart</label>
  <div class="magicBox">Add some navigation button here</div>
  <div class="container">
      <div id="grap"></div>
  </div> 
</body>

CSS

body{
    margin: 0 auto;
    overflow-x:hidden;
}
#grap {

    width: 100%;
    height: 500px;
    margin-top: 30px;
    
}
.container { 
    width:100%;
    height:auto;
    left:0;
    position: relative;
    
    -webkit-transition:all 0.4s ease-in-out;
}
input[type=checkbox] {
    display:none;
}
.btn-layout {
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 4px;
    padding:5px;
    background-color:#0093ff;
    color:white;
    cursor: pointer;
    position: relative;
    top:10px;
    left:5px;
}

.btn-layout:hover {
    background-color:#007bd6;
}

.btn-layout:active {
    background-color:#0029d6;
}

.magicBox {
    width: 25%;
    background:#fff1a3;
    position: absolute;
    top:44px;
    left:-25%;
    height: 100%;
    margin-bottom: -20000px;
    z-index: 2;
    overflow:inherit;
    -webkit-transition:all 0.4s ease-in-out;
}

input[type=checkbox]:checked ~ .container {
    left:25%;
}

input[type=checkbox]:checked ~ .magicBox {
    left:0%;
}

JavaScript

$(function () {
     var OnTrig = 0;
    
    $('#grap').highcharts({
        series: [{
            data: [1, 2, 3]        
        }]
    });
    $('#trig').click(function() {
        var chart = $('#grap').highcharts();
        var DetailsWidth = $('#grap');  
       
        if (OnTrig == 0) {
            DetailsWidth.css('width','75%');
            chart.setSize(DetailsWidth.width(),DetailsWidth.height(), true);
            OnTrig = 1;
        }
        else if (OnTrig == 1) {
            DetailsWidth.css('width','100%');
            chart.setSize(DetailsWidth.width(),DetailsWidth.height(), true);
            OnTrig = 0;
        }
    });
    
   
});