Skip to content

Instantly share code, notes, and snippets.

Created January 1, 2014 21:50
Show Gist options
  • Save anonymous/8211842 to your computer and use it in GitHub Desktop.
Save anonymous/8211842 to your computer and use it in GitHub Desktop.
A Pen by A Non Ymous.
<div id="stack">
<div class="card" id="one"></div>
<div class="card" id="two"></div>
<div class="card" id="three"></div>
<div class="card" id="four"></div>
<div class="card" id="five"></div>
</div>
$('.card').on('click', function() {
$('.card').toggleClass('is-collapsed');
});
#stack {
width: 100px;
position: relative;
}
.card {
position: absolute;
height: 50px;
width: 100%;
border: 1px solid black;
background-color: white;
left: 0;
right: 0;
margin: 0 auto;
margin-bottom: 10px;
transition: top 0.5s ease, width 0.5s ease;
}
#one.is-collapsed {
width: 80%;
}
#two {
top: 60px;
}
#two.is-collapsed {
width: 85%;
top: 3px;
}
#three {
top: 120px;
}
#three.is-collapsed {
width: 90%;
top: 6px;
}
#four {
top: 180px;
}
#four.is-collapsed {
width: 95%;
top: 9px;
}
#five {
top: 240px;
}
#five.is-collapsed {
width: 95%;
top: 12px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment