This jQuery code snippet helps you to create a multi-height card with the 3D fold out reveal. It creates a click event listener for all div elements with the class “card” that toggles their visibility. If a card is clicked, it checks if it is already showing or not. If it’s already showing, it removes the “show” class, but if it’s not showing, it adds the “show” class and increases the z-index of the card to make it appear on top of other cards.
Finally, the code also handles the case where no cards are currently showing, in which case it adds the “showing” class to the parent div and shows the clicked card with an increased z-index.
How to Create jQuery Multi-Height Cards with 3D Fold out reveal
Create the HTML structure for the multi-height card as follows:
<div class="cards">
<div class="card">
<div class="card__image-holder">
<img class="card__image" src="https://source.unsplash.com/300x225/?wave" alt="wave" />
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__image-holder">
<img class="card__image" src="https://source.unsplash.com/300x225/?beach" alt="beach" />
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__image-holder">
<img class="card__image" src="https://source.unsplash.com/300x225/?mountain" alt="mountain" />
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__image-holder">
<img class="card__image" src="https://source.unsplash.com/300x225/?field" alt="field" />
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__image-holder">
<img class="card__image" src="https://source.unsplash.com/300x225/?water" alt="water" />
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__image-holder">
<img class="card__image" src="https://source.unsplash.com/300x225/?river" alt="river" />
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__image-holder">
<img class="card__image" src="https://source.unsplash.com/300x225/?kite" alt="kite" />
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__image-holder">
<img class="card__image" src="https://source.unsplash.com/300x225/?underwater" alt="underwater" />
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__image-holder">
<img class="card__image" src="https://source.unsplash.com/300x225/?desert" alt="desert" />
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
</div>
Now, style the multi-height card using the following CSS styles:
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdr.ttf) format('truetype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf) format('truetype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf) format('truetype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdr.ttf) format('truetype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdr.ttf) format('truetype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdr.ttf) format('truetype');
}
body {
background: #dce1df;
color: #4f585e;
font-family: 'Source Sans Pro', sans-serif;
text-rendering: optimizeLegibility;
}
a.btn {
background: #0096a0;
border-radius: 4px;
box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
display: inline-block;
padding: 6px 30px 8px;
position: relative;
text-decoration: none;
transition: all 0.1s 0s ease-out;
}
.no-touch a.btn:hover {
background: #00a2ad;
box-shadow: 0px 8px 2px 0 rgba(0, 0, 0, 0.075);
transform: translateY(-2px);
transition: all 0.25s 0s ease-out;
}
.no-touch a.btn:active,
a.btn:active {
background: #008a93;
box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.25);
transform: translate3d(0, 1px, 0);
transition: all 0.025s 0s ease-out;
}
div.cards {
margin: 80px auto;
max-width: 960px;
text-align: center;
}
div.card {
background: #ffffff;
display: inline-block;
margin: 8px;
max-width: 300px;
perspective: 1000;
position: relative;
text-align: left;
transition: all 0.3s 0s ease-in;
width: 300px;
z-index: 1;
}
div.card img {
max-width: 300px;
}
div.card .card__image-holder {
background: rgba(0, 0, 0, 0.1);
height: 0;
padding-bottom: 75%;
}
div.card div.card-title {
background: #ffffff;
padding: 6px 15px 10px;
position: relative;
z-index: 0;
}
div.card div.card-title a.toggle-info {
border-radius: 32px;
height: 32px;
padding: 0;
position: absolute;
right: 15px;
top: 10px;
width: 32px;
}
div.card div.card-title a.toggle-info span {
background: #ffffff;
display: block;
height: 2px;
position: absolute;
top: 16px;
transition: all 0.15s 0s ease-out;
width: 12px;
}
div.card div.card-title a.toggle-info span.left {
right: 14px;
transform: rotate(45deg);
}
div.card div.card-title a.toggle-info span.right {
left: 14px;
transform: rotate(-45deg);
}
div.card div.card-title h2 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.05em;
margin: 0;
padding: 0;
}
div.card div.card-title h2 small {
display: block;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.025em;
}
div.card div.card-description {
padding: 0 15px 10px;
position: relative;
font-size: 14px;
}
div.card div.card-actions {
box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.075);
padding: 10px 15px 20px;
text-align: center;
}
div.card div.card-flap {
background: #d9d9d9;
position: absolute;
width: 100%;
transform-origin: top;
transform: rotateX(-90deg);
}
div.card div.flap1 {
transition: all 0.3s 0.3s ease-out;
z-index: -1;
}
div.card div.flap2 {
transition: all 0.3s 0s ease-out;
z-index: -2;
}
div.cards.showing div.card {
cursor: pointer;
opacity: 0.6;
transform: scale(0.88);
}
.no-touch div.cards.showing div.card:hover {
opacity: 0.94;
transform: scale(0.92);
}
div.card.show {
opacity: 1 !important;
transform: scale(1) !important;
}
div.card.show div.card-title a.toggle-info {
background: #ff6666 !important;
}
div.card.show div.card-title a.toggle-info span {
top: 15px;
}
div.card.show div.card-title a.toggle-info span.left {
right: 10px;
}
div.card.show div.card-title a.toggle-info span.right {
left: 10px;
}
div.card.show div.card-flap {
background: #ffffff;
transform: rotateX(0deg);
}
div.card.show div.flap1 {
transition: all 0.3s 0s ease-out;
}
div.card.show div.flap2 {
transition: all 0.3s 0.2s ease-out;
}
Load the following scripts before closing the body tag:
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
Finally, add the following JavaScript function for its functionality:
$(document).ready(function(){
var zindex = 10;
$("div.card").click(function(e){
e.preventDefault();
var isShowing = false;
if ($(this).hasClass("show")) {
isShowing = true
}
if ($("div.cards").hasClass("showing")) {
// a card is already in view
$("div.card.show")
.removeClass("show");
if (isShowing) {
// this card was showing - reset the grid
$("div.cards")
.removeClass("showing");
} else {
// this card isn't showing - get in with it
$(this)
.css({zIndex: zindex})
.addClass("show");
}
zindex++;
} else {
// no cards in view
$("div.cards")
.addClass("showing");
$(this)
.css({zIndex:zindex})
.addClass("show");
zindex++;
}
});
});
That’s all! hopefully, you have successfully created jQuery multi-height cards with 3D fold out reveal. If you have any questions or suggestions, feel free to comment below.
