JSFiddle - React, Tailwind, and code Playground

by Slava Slava

JavaScript

<html>
<head>
   <style type="text/css">
    .clicked {
      visibility: hidden;
    }
    .clicked.active {
      visibility: visible;
    }
  </style>
<script type="text/javascript"
  src="dygraph-combined.js"></script>
</head>
<body>
  <label for="graphdiv1" >graph 1</label>
  <label for="graphdiv2" >graph 2</label>
  <label for="graphdiv3" >graph 3</label>
  <div id="graphdiv1" class="clicked active"
    style="width:500px; height:300px;">
  </div>

  <div id="graphdiv2" class="clicked"
    style="width:500px; height:300px;">
  </div>

  <div id="graphdiv3" class="clicked"
    style="width:500px; height:300px;">
  </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  g1 = new Dygraph(
    document.getElementById("graphdiv1"),
    "temperatures3.csv",
    {
      rollPeriod: 7,
      showRoller: true
    }
  );

  g2 = new Dygraph(
    document.getElementById("graphdiv2"),
    "temperatures1.csv",
    {
      rollPeriod: 7,
      showRoller: true
    }
  );

  g2 = new Dygraph(
    document.getElementById("graphdiv3"),
    "temperatures2.csv",
    {
      rollPeriod: 7,
      showRoller: true
    }
  );
  $(document).ready(function(){
    $('.clicked').on('click', function(){
      $('.clicked').each(function(){
          $(this).removeClass('active');
      });
      $(this).addClass('active')
    });
  });
</script>
</body>
</html>