Toggle with Javascript

by Matthew Day

HTML

<div id="header">This is the header</div>
<div id="columns">
  <div class="column" id="first"></div>
  <div class="column" id="second"></div>
  <div class="column" id="third">
    <p>Cupcake muffin carrot cake I love I love. Sesame snaps sesame snaps chocolate cake. Powder jujubes wafer marshmallow apple pie. Donut halvah cotton candy donut chocolate I love. Danish sweet cake candy canes croissant. Candy canes tiramisu icing cotton candy cupcake cotton candy brownie biscuit. Muffin halvah cheesecake I love cake carrot cake cheesecake.</p>
    <p>Macaroon cake cookie pudding. Chupa chups carrot cake donut gingerbread. Jujubes gingerbread dessert muffin. Gummies I love ice cream tart gummi bears dragée. Brownie liquorice chocolate bar brownie cookie. Soufflé muffin carrot cake gummi bears I love cheesecake danish dragée candy canes. I love sweet biscuit. Pudding I love powder pudding I love jelly beans ice cream icing. Danish oat cake caramels pastry brownie I love sugar plum I love brownie.</p>
    <p>Macaroon jelly pie tootsie roll chocolate bar chocolate bar I love sugar plum. Bear claw gummi bears gummies tart danish lemon drops pudding. Jelly gummi bears chupa chups cupcake apple pie pastry marzipan chocolate bar. Muffin pastry dessert jelly-o. Lemon drops sweet roll sesame snaps dessert. I love cheesecake cheesecake tiramisu. Bonbon candy tiramisu cheesecake I love bear claw. Croissant danish donut lemon drops lemon drops sugar plum lollipop.</p>
  </div>
</div>
<div id="footer">This is the footer</div>

CSS

body {
  color: white;
}

p {
  margin: 0;
}

#header,
#footer {
  background: #2B333C; /* black */
  padding: 40px 0;
  text-align: center;
}

#footer {
  background: #86D8DB; /* light blue */
}

#columns {
  border: 1px solid red;
}

.column {
  display: inline-block;
  height: 100%;
  margin-bottom: -4px;
  margin-right: -4px;
  vertical-align: top;
}

#first {
  background: #BBD85E; /* green */
  width: 300px;
}

#second {
  background: #E4433B; /* red */
  width: calc((100% - 300px) / 2);
}

#third {
  background: #419BDE; /* blue */
  width: calc((100% - 300px) / 2);
}

JavaScript

// Lines 4-5 make all the columns have equal height
var colHeight = document.getElementById('columns').clientHeight;
document.getElementById('columns').style.height = colHeight + "px";

// Lines 8-9 put the second and third column IDs in a variable so we can call them later.
var second = document.getElementById('second');
var third = document.getElementById('third')

// Lines 12-13 put the widths of the second and third columns in a variable which we need to make a comparison to decide whether or not to decrease or increase their widths later.
var secondwidth = second.clientWidth;
var thirdwidth = third.clientWidth;

// Lines 16 listens for a click on the second column
document.getElementById("second").addEventListener("click",
// Lines 18-29 define a function the toggles the widths of the second and third columns. This function is called when a click is detected on the second column.
function( event ) {
	var secondwidthinquiry = second.clientWidth;
  var thirdwidthinquiry = third.clientWidth;
  if (secondwidth == secondwidthinquiry) {
  	second.style.width = (secondwidth * 0.5) + "px";
    third.style.width = (thirdwidth + (secondwidth * 0.5)) + "px";
  }
  else {
  	second.style.width = secondwidth + "px";
    third.style.width = thirdwidth + "px";
  }
  });