Slider box toggle noJs

by Freer Hall

HTML

<div class='box'>
  <input type="checkbox" id="boxToggle" checked="checked" />
  <div class='slide'>
    <label class='toggler' for="boxToggle"></label>
    <span class='clicker'>Hello</span>
  </div>
</div>

CSS

html, body{
  height:100%;
}
*{
  margin:0px;
  padding:0px;
}
#boxToggle{
  display:none;
}
.clicker{
  position:relative;
  top:90px;
  background:green;
  cursor:pointer;
}
.box{
  overflow:hidden;
  background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
  background-size: cover;
  background-position:center;
  height:100%;
  width:100%;
}
.slide{
  position: relative;
  left:39vw;
  width: 55vw;
  height: 77vh;
  background: red;
  transform:translateY(100vh);
  transition:transform 0.4s ease-out;
}
input:checked + .slide{
  transform:translateY(23vh);
}
.toggler {
  cursor:pointer;
  content: '';
  position:absolute;
  top:-3vh;
  width: 0px;
  height: 0px;
  border-left:27.5vw solid transparent;
  border-right:27.5vw solid transparent;
  border-bottom:3vh solid white;
}
input:checked + .slide .toggler{
  transform:translateY(3vh) rotateX(180deg);
}

JavaScript

//listen for click event on hello
document.querySelector(".clicker").addEventListener("click", function(){
  var div = document.createElement("div");
  var text = document.createTextNode("Hello");
  div.appendChild(text);
  document.body.appendChild(div);
});