Cacher is the code snippet organizer for pro developers

<div class="jumbotron" id="div1">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">
    This is a simple hero unit, a simple jumbotron-style component for calling
    extra attention to featured content or information.
  </p>
  <hr class="my-4" />
  <p>
    It uses utility classes for typography and spacing to space content out
    within the larger container.
  </p>
  <a class="btn btn-primary btn-lg" href="#" onclick="toggleP()" role="button"
    >Learn more</a
  >
</div>

<div class="container my-4">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">
        <i class="fa fas fa-camera fa-sm"></i> Card title
      </h4>
      <p class="card-text">Some example text. Some example text.</p>
      <a href="#" onclick="toggleP()" class="card-link">Card link</a>
      <a href="#" onclick="toggleP()" class="card-link">Another link</a>
    </div>
  </div>
</div>
<div class="mt-4">
  <div class="list-group">
    <a class="list-group-item" href="#"
      ><i class="fa fa-home fa-fw"></i>&nbsp; Home</a
    >
    <a class="list-group-item" href="#"
      ><i class="fa fa-book fa-fw"></i>&nbsp; Library</a
    >
    <a class="list-group-item" href="#"
      ><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a
    >
    <a class="list-group-item" href="#"
      ><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a
    >
  </div>
</div>

const p = document.querySelector("#div1");

const isOpend = event => {
  let el = event.target;
  el.classList.remove("sid");
  el.classList.add("show");
  el.removeEventListener("animationend", isOpend);
};
const isClosed = event => {
  let el = event.target;
  el.classList.remove("sou");
  el.classList.remove("show");
  el.removeEventListener("animationend", isClosed);
};
const openP = () => {
  p.addEventListener("animationend", isOpend);
  p.classList.add("sid");
  p.classList.add("show");
};
const closeP = () => {
  p.addEventListener("animationend", isClosed);
  p.classList.add("sou");
};
const toggleP = () => {
  let isOpen = p.classList.contains("show");
  if (isOpen == true) {
    closeP();
  } else {
    openP();
  }
};

.viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#div1 {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10;
}
#div1.show {
  position: absolute;
  top: 0;
}
.sid {
  -webkit-animation: slideInDown ease-in 0.5s;
  animation: slideInDown ease-in 0.5s;
}

.sou {
  -webkit-animation: slideOutUp ease-out 0.5s;
  animation: slideOutUp ease-out 0.5s;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://codepen.io/ControlledChaos/pen/eNGOYy" rel="stylesheet" />