Slide Up/Down animation with CSS

.js-slider.closed {
  max-height: 0;
}

/* Slider styling */
.js-slider {
  background-color: white;
  padding: 0 1em;
  margin: 1em 0;
  border-radius: 0.2em;
}

/* Page styling */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: skyblue;
  line-height: 1.5;
  padding: 2em;
  color: #666;
}

.container {
  position: relative;
  margin: 0 auto;
  max-width: 480px;
  overflow: visible;
}

h1 {
  font-weight: 100;
  color: #222;
}

.button {
  display: block;
  height: 2em;
  background-color: darkslategray;
  text-align: center;
  color: white;
  font-weight: 100;
  font-size: 2em;
  line-height: 2em;
  border-radius: 0.25em;
  text-decoration: none;
}

.button:hover {
  background-color: coral;
}

.button:active {
  background-color: darken(coral, 3%);
}

</style>
<div class="container">
  <a href="#" class="js-button button">Hide Him!</a>
  <div class="js-slider slider">
    <h1>I'm here to be hidden.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu facilisis ligula. Nam imperdiet lacinia vestibulum. Nunc at dignissim felis. Vestibulum volutpat orci sed rhoncus interdum. Mauris vitae magna lobortis ante fermentum sagittis. Quisque nec massa sollicitudin, suscipit mi ultricies, mollis mi. Praesent ipsum ipsum, elementum nec leo et, viverra vestibulum enim. Nunc lacus ex, dapibus sit amet laoreet sed, placerat vel magna. Mauris quis vehicula metus.</p>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('.js-button');
  var slider = document.querySelector('.js-slider');
  
  button.addEventListener('click', function(e) {
    e.preventDefault();
    
    if (slider.classList.contains('closed')) {
      button.textContent = 'Hide Him!';
      slider.classList.remove('closed');
    } else {
      button.textContent = 'No, Bring Him Back!';
      slider.classList.add('closed');
    }
  });
});

</script>

Slide Up/Down animation with CSS

You may like these posts :

Write Your Comment