<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>
$( 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');
}
});
});
@import "compass/css3";
.slider {
overflow-y: hidden;
max-height: 500px;
box-sizing: border-box;
transition-property: all;
transition-duration: .5s;
transition-timing-function: ease;
}
.slider.closed {
max-height: 0;
}
.slider {
background-color: white;
padding: 0 1em;
margin: 1em 0;
border-radius: .2em;
}
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%);
}
}