sixhat/index.html

## index.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {box-sizing: border-box;}
      body{ background: #ddd;
      display: grid;
      grid-template-columns: repeat(4, 1fr);}
      .slider {
        border: 1px solid rebeccapurple;
        height: 100vh;
        cursor: pointer;
      }
      .slider:hover{
        background: #fff;
      }
      @keyframes moveUp {
        from {
          height: 100h;
        }
        to {
          height: 10vh;
        }
      }
      .moveUp {
        animation: moveUp 300ms ease forwards;
      }
    </style>
  </head>
  <body>
    <div class="slider" onclick="slideMe(this)">News</div>
    <div class="slider" onclick="slideMe(this)">Module</div>
    <div class="slider" onclick="slideMe(this)">Course</div>
    <div class="slider" onclick="slideMe(this)">About</div>

    <script>
      function slideMe(x){
        // x.classList.toggle("moveUp");
        let divs = document.getElementsByClassName("slider");
        for (let el of divs){
          if (el !== x){

          el.classList.toggle("moveUp");
          }
        }
      }
    </script>
  </body>
</html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
	* {box-sizing: border-box;}
	body{ background: #ddd;
	display: grid;
	grid-template-columns: repeat(4, 1fr);}
	.slider {
	border: 1px solid rebeccapurple;
	height: 100vh;
	cursor: pointer;
	}
	.slider:hover{
	background: #fff;
	}
	@keyframes moveUp {
	from {
	height: 100h;
	}
	to {
	height: 10vh;
	}
	}
	.moveUp {
	animation: moveUp 300ms ease forwards;
	}
	</style>
	</head>
	<body>
	<div class="slider" onclick="slideMe(this)">News</div>
	<div class="slider" onclick="slideMe(this)">Module</div>
	<div class="slider" onclick="slideMe(this)">Course</div>
	<div class="slider" onclick="slideMe(this)">About</div>

	<script>
	function slideMe(x){
	// x.classList.toggle("moveUp");
	let divs = document.getElementsByClassName("slider");
	for (let el of divs){
	if (el !== x){

	el.classList.toggle("moveUp");
	}
	}
	}
	</script>
	</body>
	</html>