JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<div id="main">
<div id="topbar">
<img src="img/Untitled-1_03.png" alt="maintop">
</div>
    <div id="chart">
    <img src="img/icons_16.png" alt="vtub" class="vtub">
    <img src="img/Untitled-1_06.png" alt="chart">
    </div>
    <div id="bottom">
    <img src="img/icons_21.png" alt="subscribe" class="sub">
<img src="img/Untitled-1_08.png"alt="rawdataarea">
        </div>
   <!-- <div id="channels">
 <img src="img/show.png" alt="show" class="cnlid">  <img src="img/show.png" alt="show" class="cnlid">  <img src="img/show.png" alt="show" class="cnlid">
 </div>-->
        <div id="rawdata">
</div>
<div id="sidebar">
<img src="img/chns_15.png" alt="chnbtn" class="btn" id="first" >
<img src="img/chns_18.png" alt="chnbtn" class="btn1" id="second" >
<img src="img/chns_20.png" alt="chnbtn" class="btn2" id="third" >
    <img src="img/Untitled-1_13.png" alt="side" class="side">
    </div>
<div id="rawdat">
<img src="img/channel3.png"  alt="chn3" id="three">
<img src="img/channel2.png" alt="chn2" id="two">
    <img src="img/channl1.png"  alt="chn1" id="one">
    <img src="img/total.png" class="total" alt="total">
    <img src="img/Untitled-1.png"  alt="dataarea" class="raw">  
    </div>

<div class="datas">

  <table>

<tr>
<td>Channel ID#1</td>
<td>Channel ID#2</td>
<td>Channel ID#3</td>
<td>Day of the week</td>
<td>Temperture </td>
</tr>

CSS

#one{
          float: left;
  position: absolute;
  z-index: 200;
    width: 54%;
  height: 323px;
  display:block;

}

#two{
      float: left;
  position: absolute;
  z-index: 200;
    width: 54%;
  height: 323px;
  display:block;



#three{
float: left;
  position: absolute;
  z-index: 200;
  width: 54%;
  height: 323px;
  display:block;

}

JavaScript

var graphone = document.getElementById("one");
var graphtwo = document.getElementById("two");
var graphthree = document.getElementById("three");

function init() {
document.getElementById("first").onclick = function(e){
        e.preventDefault(); 
        onebtn();
    }
    document.getElementById("second").onclick = function(e){
        e.preventDefault(); 
        twobtn();
    }
    document.getElementById("third").onclick = function(e){
        e.preventDefault(); 
        threeone();
    }

function onebtn(){
        if(graphone.style.display == null || graphone.style.display == "none") {
        graphone.style.display = "block";
        graphtwo.style.display = "none";
        graphthree.style.display = "none";
    } else {
        graphone.style.display = "none";
    }
}



function twobtn(){
            if(graphtwo.style.display == null || graphtwo.style.display == "none") {
        graphtwo.style.display = "block";
        graphone.style.display = "none";
        graphthree.style.display = "none";
    } else {
        graphtwo.style.display = "none";
    }
}




function threeone(){
            if(graphthree.style.display == null || graphthree.style.display == "none") {
        graphthree.style.display = "block";
        graphone.style.display = "none";
        graphtwo.style.display = "none";
    } else {
        graphthree.style.display = "none";
    }
}
}

init();