JSFiddle - React, Tailwind, and code Playground

by fekkyDev s

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>
  <table>
    <tr>
      <td id="v1">View 1</td>

      <td id="v2">View 2</td>
    </tr>
<tr>
      <td id="v11">View 1</td>

      <td id="v22">View 2</td>
    </tr>
    <tr>
      <td colspan="2">View 3</td>
    </tr>
  </table>
  <div id="views-container">
    <input type="checkbox" checked="checked" onclick="changeView()">
    <label>View 1</label>
    <input type="checkbox" checked="checked" onclick="changeView()">
    <label>View 2</label>
    <input type="checkbox" checked="checked" onclick="changeView()">
    <label>View 3</label>
  </div>
</body>

CSS

html {
      height: 100%;
    }
    
    body {
      height: 100%;
    }
    
    table {
      width: 100%;
      height: 90%;
    }
    
    table td {
      text-align: center;
      border: 1px solid black;
    }
    
    #views-container {
      height: 10%;
    }

JavaScript

/**
 * Created by yako on 1/25/16.
 */
var tds = document.getElementsByTagName('td');
var inputs = document.getElementsByTagName('input');
var rows = document.getElementsByTagName('tr');

console.log(inputs);
console.log(tds);
var changeView = function() {

  for (var i = 0; i < inputs.length; i++) {
    if (!inputs[i].checked) {
      if (tds[i].style.display !== 'none') tds[i].style.display = 'none';
    } else {
      if (tds[i].style.display === 'none') tds[i].style.display = '';
    }
  }

  if (!inputs[0].checked && !inputs[1].checked) rows[0].style.display = 'none';
  else rows[0].style.display = '';

  if (!inputs[2].checked) rows[1].style.display = 'none';
  else rows[1].style.display = '';

};

changeView();



$(window).on("load resize", function() {

  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
  var v1Width = $("#v1").width()


  $("#v1").resizable({
    minWidth: 50,
    maxWidth: windowWidth - 80,
    maxHeight: windowHeight * (.83),
    handles: "e, s"
  }).on("resize", function() {

   // if (v1Width == $("#v1").width()) {
      $("#v2").height(0)
   // }
    v1Width = $("#v1").width()
  });
$("#v11").resizable({
    minWidth: 50,
    maxWidth: windowWidth - 80,
    maxHeight: windowHeight * (.83),
    handles: "e, s"
  }).on("resize", function() {

   // if (v1Width == $("#v1").width()) {
      $("#v22").height(0)
   // }
    v1Width = $("#v1").width()
  });
  $("#v22").resizable({
    minWidth: 50,
    maxWidth: windowWidth - 80,
    maxHeight: windowHeight * (.83),
    handles: "e, s"
  }).on("resize", function() {

   // if (v1Width == $("#v1").width()) {
      $("#v11").height(0)
   // }
    v1Width = $("#v1").width()
  });
  $("#v2").resizable({
    maxHeight: windowHeight * (.83),
    handles: "s"
  }).on("resize", function() {
    $("#v1").height(0)
  });

});