Spacemaids' Tab Box

Exclusive tab box used on the upcoming spacemaids.com

by Emily Humphrey

HTML

<div id="wrapper">
    <div id="about-box" class="boxes boxes-1 tab-box tab-1">
        <div class="tab-nav">
            <ul>
                <li><a href="#hc-1" class="one">Home Cleaning</a></li>
                <li><a href="#hc-2" class="two">Spacemaids University</a></li>
                <li><a href="#hc-3" class="three">Hypoallergenic</a></li>
                <li><a href="#hc-4" class="four">Fido Friendly</a></li>
                <li><a href="#hc-5" class="five">Get Started</a></li>
            </ul>
        </div><!-- div.box-nav -->
        
        <div class="tab-content">
            <div class="one">
                <h2>Home Cleaning</h2>
                <p>When it comes to house cleaning services, we realize you have a choice. That is why we make sure you never have to sacrifice quality, safety or the environment when you choose Spacemaids™ as your home cleaning specialists. With Spacemaids, you can rest assured knowing your cleaners are trustworthy, professional, and take pride in their work. Our training at Spacemaids™ University combined with advanced cleaning equipment ensures the appropriate level of attention and know-how is given to the care of your home. In conjunction with our excellent quality of service, our Green Seal certified products mean you can breathe easy knowing your indoor environment is truly a clean, green sanctuary.</p>
                <p>From here getting started is simple. When you scroll below you’ll see different cleaning plans, these are outlines for your maid to follow during your cleaning. Below that you will see our hourly packages, just pick the one you that  is appropriate for your home ( don’t worry about selting to much time, any unuseed time will be cretied or refunded).  Afterward, you will be taken to the booking page to selcect day and time and get started!</p>
            </div>
            <div class="two">
                <h2>Spacemaids University</h2>
                <p>Where experienced cleaners go to...

CSS

body{
	background:#E6E2DB;
	color:#494947;
	font-family: "Myriad Pro", Frutiger, "Frutiger Linotype", Helvetica, Arial, sans-serif;
	font-size:16px;
	overflow-y: auto;
	padding:0;
	margin:0;
}
div#wrapper{
	display:block;
	width:940px;
	margin:20px auto 0;
    overflow:hidden;
}
div.boxes{
	display:block;
	margin-bottom:20px;
	position:relative;
	background:#fbfbfb;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float:left;
}
div.boxes:after{
	display:block;
	height:100%;
	width:100%;
	position:absolute;
	bottom:-4px;
	right:-4px;
	background:#323232;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	content:"";
	opacity:.05;
	z-index:-1;
}
div.boxes-4{
	width:220px;
	margin-right:20px;
}
div.boxes-3{
	width:300px;
	margin-right:20px;
}
div.boxes-2{
	width:460px;
	margin-right:20px;
}
div.boxes-1{
	width:940px;
	margin-right:0;
}

div.tab-box{
	transition: height .3s;
	-webkit-transition: height .3s;
}
div.tab-nav{
	display:block;
	position:absolute;
	width:220px;
	height:100%;
	float:left;
	background: #7D569F;
	margin:0;
	padding:0;
	overflow:hidden;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
div.tab-nav ul{
	background: #7D569F;
	margin:0;
	list-style:none;
	padding:0;
}
div.tab-nav ul li a{
	display:block;
	width:180px;
	line-height:40px;
	padding:10px 20px;
	text-decoration:none;
	color:#fbfbfb;
}
div.tab-nav ul li a:hover{
	background: #684686;
}
div.tab-nav ul li a.active{
	background: #54366C;
}
div.tab-content{
	height:100%;
	margin-left:220px;
	min-height:300px;
	overflow:hidden;
}
div.tab-content div{
	display:block;
	height:0;
	width: 680px;
	padding:0 20px;
	float:left;
	opacity:0;
	transition: opacity .1s;
	-webkit-transition: opacity .1s;
}
div.tab-content div ul li{
	margin-bottom:10px;
}

/* Tab Box - Active...

JavaScript

$(".tab-box").each(function () {
    var content1 = true,
        content2 = false,
        content3 = false,
        content4 = false,
        content5 = false,
        containBox = $(this),
        linkOne = $(this).find("a.one"),
        linkTwo = $(this).find("a.two"),
        linkThree = $(this).find("a.three"),
        linkFour = $(this).find("a.four"),
        linkFive = $(this).find("a.five");

    $(linkOne).click(function (event) {
        event.preventDefault();
        if (content1 === false) {
            $(containBox).addClass('tab-1'),
            content1 = true,
            $(containBox).removeClass('tab-2 tab-3 tab-4 tab-5'),
            content2 = false,
            content3 = false,
            content4 = false,
            content5 = false;
        } else {
        }
    });    
    $(linkTwo).click(function (event) {
        event.preventDefault();
        if (content2 === false) {
            $(containBox).addClass('tab-2'),
            content2 = true;
            $(containBox).removeClass('tab-1 tab-3 tab-4 tab-5'),
            content1 = false,
            content3 = false,
            content4 = false,
            content5 = false;
        } else {
        }
    });    
    $(linkThree).click(function (event) {
        event.preventDefault();
        if (content3 === false) {
            $(containBox).addClass('tab-3'),
            content3 = true;
            $(containBox).removeClass('tab-1 tab-2 tab-4 tab-5'),
            content1 = false,
            content2 = false,
            content4 = false,
            content5 = false;
        } else {
        }
    });
    $(linkFour).click(function (event) {
        event.preventDefault();
        if (content4 === false) {
            $(containBox).addClass('tab-4'),
            content4 = true;
            $(containBox).removeClass('tab-1 tab-2 tab-3 tab-5'),
            content1 = false,
            content2 = false,
            content3 = false,
            content5 = false;
        }...