CODE EXAMPLE FOR CSS

Slide Up/Down animation with CSS

//HTML

<div class="container">
  <a href="#" class="button">Hide Him!</a>
  <div class="slider">
    <h1>I'm here to be hidden. ;-)</h1>
    <p>Bacon ipsum dolor sit amet swine jerky jowl pork belly sausage brisket, beef ribs meatloaf chuck beef. Flank corned beef prosciutto cow. Pork tail swine meatball brisket cow. Turducken short loin doner pork belly frankfurter flank kevin ball tip meatloaf ham capicola. Tri-tip meatloaf pancetta tenderloin frankfurter shoulder swine turkey porchetta strip steak biltong pork. Bresaola turkey boudin filet mignon spare ribs jowl t-bone kevin tri-tip brisket chuck beef ribs.</p>    
  </div>
</div>


//js
$( document ).ready( function() {
  var button = $('.button');
  var slider = $('.slider');
  
  button.on('click', function(e) {
    
    if ( slider.hasClass('closed') ) {
      button.text('Hide Him!');
      slider.toggleClass('closed');
    } else {
      button.text('No, Bring Him Back!');
      slider.toggleClass('closed');
    }
    
  });
  
}); 


//CSS(SCSS)
@import "compass/css3";

// Slide down effect via css3
// No jQuery animation
// Taken from http://davidwalsh.name/css-slide

.slider {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */
  box-sizing: border-box;

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: ease;
}
.slider.closed {
	max-height: 0;
}



// slider styling
.slider {
  background-color: white;
  padding: 0 1em;
  margin: 1em 0;
  border-radius: .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: .25em;
  text-decoration: none;
 
  &:hover {
    text-decoration: none;
    background-color: coral;
  }
  &:active {
    text-decoration: none;
    background-color: darken(coral,3%);
  }
}