<div id="wrapper">
		<div class="section active" id="section1">
				<div class="title_bar" id="title_bar1">

						<div class='heading'>heading 1</div>
						<div class='button'>
								<div class="one"></div>
								<div class="two"></div>

						</div>

				</div>
				<div class="content_box" id="content_box1">
						<div class="content-wrapper">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quos itaque iure porro ipsum illum nisi, quas, sunt earum est blanditiis, reiciendis voluptatem molestiae? Dolores, explicabo soluta necessitatibus accusamus! Quia.
						</div>
				</div>
		</div>
		<div class="section inactive" id="section2">
				<div class="title_bar" id="title_bar2">
						<div class='heading'>heading 2</div>
						<div class='button'>
								<div class="one"></div>
								<div class="two"></div>
						</div>
				</div>
				<div class="content_box" id="content_box2">
						<div class="content-wrapper">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam autem itaque porro ducimus doloremque? Iure enim perferendis totam ullam quibusdam vero velit ipsum! Vel, quam laudantium in numquam dignissimos laboriosam.
						</div>
				</div>
		</div>
		<div class="section inactive" id="section3">
				<div class="title_bar" id="title_bar3">
						<div class='heading'>heading 3</div>
						<div class='button'>
								<div class="one"></div>
								<div class="two"></div>
						</div>
				</div>
				<div class="content_box" id="content_box3">
						<div class="content-wrapper">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus iste, amet labore officia vel totam, error blanditiis assumenda repudiandae autem pariatur minus cum repellendus sunt dicta illo consectetur corporis! Animi!
						</div>
				</div>
		</div>
		<div class="section inactive" id="section4">
				<div class="title_bar" id="title_bar4">
						<div class='heading'>heading 4</div>
						<div class='button'>
								<div class="one"></div>
								<div class="two"></div>
						</div>
				</div>
				<div class="content_box" id="content_box4">
						<div class="content-wrapper">
								Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem, sequi labore exercitationem animi, quibusdam dignissimos ab ipsam quam debitis magni recusandae quos, expedita hic! Dolores, consequatur sunt possimus cumque.
						</div>
				</div>
		</div>
</div>
body {
    background-color: #2d2d2d;
    font-family: 'Verdana'
}
#wrapper {
    width: 500px;
    margin: 100px auto 0;
    color: #2d2d2d;
}
.section {
    margin: 0 auto;
}
.title_bar {
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
    height: 50px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-bottom: none;
}
#title_bar4 {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.button {
    cursor: pointer;
    width: 40px;
    height: 40px;
    float: right;
    position: relative;
    top: 5px;
    right: 5px;
    transform: scale(.5);
}
.one, .two {
    width: 30px;
    height: 4px;
    background-color: #2d2d2d;
    position: relative;
    margin: 0 auto;
}
.one {
    top: 18px;
}
.two {
    top: 14px;
}
.heading {
    text-transform: uppercase;
    float: left;
    position: relative;
    left: 25px;
    font-size: 1.3em;
    line-height: 50px;
}
.content_box {
    width: 100%;
    background-color: #fff;
    clear: both;
    display: none;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .1);
}
.content-wrapper {
    padding: 30px;
    font-size: 1em;
}
.active{
    position: relative;
    z-index: 5;
    .title_bar {
        width: 100%;
        box-shadow: 0 0 10px #fff;
    }
    .content_box {
        display: block;
        width: 100%;
        box-shadow: 0 0 10px #fff;
    }
}
$('.button').click(function() {

		var thisButton = $(this);
		var wrapper = $('#wrapper');
		var thisSection = thisButton.parents('.section');
		var thisTitleBar = thisSection.children('.title_bar');
		var thisContentBox = thisSection.children('.content_box');

		if ($('body').hasClass('animating')) {
				return false;
		} else if (thisSection.hasClass('inactive')) {
				$('body').addClass('animating');
				$('.active').find('.content_box').velocity('slideUp', {
						duration: 400,
						easing: 'swing'
				});
				$('.active').find('.one').velocity({
						rotateZ: '-180deg',
				}, {
						duration: 600,
						easing: 'swing'
				});
				$('.active').find('.two').velocity({
						rotateZ: '90deg',
				}, {
						duration: 600,
						easing: 'swing'
				});
				$('.active').velocity({
						opacity: '.75',
				}, {
						duration: 400,
						easing: 'swing',
						complete: function() {
								wrapper.children('.active').find('.title_bar').velocity({
										width: '90%'
								}, {
										duration: 200,
										easing: 'swing'
								});
						}
				});
				thisTitleBar.find('.one').velocity({
						rotateZ: '0deg',
				}, {
						duration: 600,
						easing: 'swing'
				});
				thisTitleBar.find('.two').velocity({
						rotateZ: '0deg',
				}, {
						duration: 600,
						easing: 'swing'
				});
				thisTitleBar.parent().velocity({
						opacity: '1'
				}, {
						duration: 400,
						easing: 'swing'
				});
				thisTitleBar.velocity({
						width: '100%'
				}, {
						duration: 200,
						easing: 'swing',
						complete: function() {
								thisContentBox.velocity('slideDown', {
										duration: 400,
										easing: 'swing',
										complete: function() {
												if (wrapper.children('.section').hasClass('active')) {
														wrapper.children('.section').removeClass('active').addClass('inactive');
												}
												if (thisSection.hasClass('inactive')) {
														thisSection.removeClass('inactive').addClass('active');
												}
												$('body').removeClass('animating');
										}
								});
						}
				});
		}
});

$(document).ready(function() {

		$('.active').velocity({
				opacity: '1'
		}, {
				duration: 500
		});
		$('.active .two').velocity({
				rotateZ: '0deg'
		}, {
				duration: 500
		});
		$('.inactive').velocity({
				opacity: '0.75'
		}, {
				duration: 500
		});

		$('.inactive .two').velocity({
				rotateZ: '90deg'
		}, {
				duration: 500
		});

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js