Flipping Elements with Height Adjusting Container

Just replacing cards by flipping with the parent container adjusting its height on the fly so that content will not be followed by white space.

by Travis Almand

HTML

<h2>Card Flipper</h2>
<p>Click the card to flip it</p>
<div class="flip-container">
	<div class="flipper">
		<div class="card front active">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere rutrum neque, dictum imperdiet diam blandit nec. Etiam euismod nunc nec turpis molestie blandit. Mauris in urna vitae eros pharetra efficitur id non dolor. Morbi felis dolor, vulputate a consequat sed, porttitor consequat nulla. Sed tellus ipsum, varius consectetur enim nec, molestie suscipit lacus. Mauris nunc sem, sodales vitae neque non, auctor tincidunt tortor. Etiam sit amet tortor hendrerit, ultrices orci vitae, facilisis velit. Proin iaculis libero in lacus sodales vestibulum. In ac nibh tempus, auctor augue vitae, scelerisque magna. Phasellus vel tincidunt magna. Etiam ipsum lacus, viverra ullamcorper tellus sed, malesuada tristique leo. Duis tincidunt quis lectus in vestibulum. Donec varius vehicula convallis.</p>
            <p>Nullam lobortis hendrerit risus, vitae efficitur eros suscipit quis. Aliquam hendrerit et nibh at tristique. Morbi tincidunt ante eget libero dignissim, at rutrum velit dapibus. In hac habitasse platea dictumst. Nullam fringilla ipsum imperdiet suscipit rutrum. In sapien elit, lobortis sit amet commodo non, imperdiet eu arcu. Donec vehicula nibh ac diam tempor dictum.</p>
            <p>Donec aliquet vitae quam blandit suscipit. Cras luctus, elit ac malesuada efficitur, mi sem tempor turpis, sed pellentesque elit justo vel elit. Proin pellentesque nisi vel libero dictum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet pellentesque felis. Sed egestas, purus sed ornare laoreet, quam eros venenatis mauris, lobortis viverra magna libero sed risus. Duis pretium consectetur felis et malesuada.</p>
		</div>
		<div class="card back">
		    <p>Nullam lobortis hendrerit risus, vitae efficitur eros suscipit quis. Aliquam hendrerit et nibh at...

CSS

html {
    background-color: white;
    margin: 0;
    padding: 0;
}
html * {
    box-sizing: border-box;
}
body {
    background-color: gainsboro;
    margin: auto;
    max-width: 768px;
    padding: 20px;
}

.flip-container {
	transform: perspective(1000px);
    transform-style: preserve-3d;
    transition: height 0.6s;
}

.flip-container.flip .flipper {
    transform: rotate3d(0, 1, 0, 180deg);
}

.flipper {
    margin: auto;
    position: relative;
	transform-style: preserve-3d;
    transition: transform 0.6s;
    width: 75%;
}

.card {
	backface-visibility: hidden;
    background-color: white;
    border-radius: 10px;
    left: 0;
    overflow: hidden;
    padding: 10px;
	position: absolute;
	top: 0;
    transform: rotate3d(0, 0, 0, 0deg);
}

.back {
	transform: rotate3d(0, 1, 0, 180deg);
}

JavaScript

var $flipContainer = $('.flip-container');
var $flipper = $('.flipper');

$flipContainer.css('height', $('.active').outerHeight(true)).on('click', function () {
    var $this = $(this);
    $this.find('.card').toggleClass('active');
    $this.toggleClass('flip');
    window.setTimeout(function () {
        $this.find('.card').attr('style', '').css('height', $('.active').outerHeight(true)).parents('.flip-container').css('height', $('.active').outerHeight(true));
    }, 250);
});