gmacdougall · May 5, 2020 23:24
diff --git a/index.html b/index.html
 <html>
  <head>
 <style>
 .folder {
  display: flex;
 }

 .folder div {
  width: 100%;
 }

 h2 {
  padding: 0.5rem;
  margin: 0;
 }

 #home h2 {
  background-color: #eee
 }

 #home .contents {
  background-color: #f6f6f6;
 }

 #about h2, #about .expanding {
  background-color: #ffdab6;
 }

 #about .contents {
  background-color: #ffead3;
 }

 #work h2 {
  background-color: #fff1b6;
 }

 #work .contents {
  background-color: #fff6d2;
 }

 .contents {
  height: 800px;
 }
 </style>
  </head>
  <div class='folder'>
    <div id='home'>
      <h2>Home</h2>
      <div class='contents'></div>
    </div>
    <div id='about'>
      <h2>About</h2>
      <div class='expanding'></div>
      <div class='contents'></div>
    </div>
    <div id='work'>
      <h2>Work</h2>
      <div class='contents'></div>
    </div>
  </div>
 <script>
  const expanding = document.querySelector('#about .expanding');
  const contents = document.querySelector('#about .contents');

  const biggener = (height) => {
    expanding.style.height = height.toString() + "px";
    contents.style.height = (800 - height).toString() + "px";
    if (height < 800) {
      setTimeout(() => {
        height += 4;
        biggener(height);
      }, 1);
    }
  }

  document.querySelector('#about h2').onclick = () => {
    biggener(0)
  }
 </script>
 </html>
	<html>
	<head>
	<style>
	.folder {
	display: flex;
	}

	.folder div {
	width: 100%;
	}

	h2 {
	padding: 0.5rem;
	margin: 0;
	}

	#home h2 {
	background-color: #eee
	}

	#home .contents {
	background-color: #f6f6f6;
	}

	#about h2, #about .expanding {
	background-color: #ffdab6;
	}

	#about .contents {
	background-color: #ffead3;
	}

	#work h2 {
	background-color: #fff1b6;
	}

	#work .contents {
	background-color: #fff6d2;
	}

	.contents {
	height: 800px;
	}
	</style>
	</head>
	<div class='folder'>
	<div id='home'>
	<h2>Home</h2>
	<div class='contents'></div>
	</div>
	<div id='about'>
	<h2>About</h2>
	<div class='expanding'></div>
	<div class='contents'></div>
	</div>
	<div id='work'>
	<h2>Work</h2>
	<div class='contents'></div>
	</div>
	</div>
	<script>
	const expanding = document.querySelector('#about .expanding');
	const contents = document.querySelector('#about .contents');

	const biggener = (height) => {
	expanding.style.height = height.toString() + "px";
	contents.style.height = (800 - height).toString() + "px";
	if (height < 800) {
	setTimeout(() => {
	height += 4;
	biggener(height);
	}, 1);
	}
	}

	document.querySelector('#about h2').onclick = () => {
	biggener(0)
	}
	</script>
	</html>