Content Reload

by Emily Humphrey

HTML

<div class="contain red">
    <div class="nav">
        <ul>
            <li><a href="#1" class="one">1</a></li>
            <li><a href="#2" class="two">2</a></li>
            <li><a href="#3" class="three">3</a></li>
            <li><a href="#4" class="four">4</a></li>
            <li><a href="#5" class="five">5</a></li>
        </ul>
    </div>
    <div class="cont-1 cont"><div class="expanse"></div></div>
    <div class="cont-2 cont"><div class="expanse"></div></div>
    <div class="cont-3 cont"><div class="expanse"></div></div>
    <div class="cont-4 cont"><div class="expanse"></div></div>
</div>

<div class="contain red">
    <div class="nav">
        <ul>
            <li><a href="#1" class="one">1</a></li>
            <li><a href="#2" class="two">2</a></li>
            <li><a href="#3" class="three">3</a></li>
            <li><a href="#4" class="four">4</a></li>
            <li><a href="#5" class="five">5</a></li>
        </ul>
    </div>
    <div class="cont-1 cont"><div class="expanse"></div></div>
    <div class="cont-2 cont"><div class="expanse"></div></div>
    <div class="cont-3 cont"><div class="expanse"></div></div>
    <div class="cont-4 cont"><div class="expanse"></div></div>
</div>

CSS

div.contain {
    display:block;
    width:400px;
    margin:0 auto;
    background:#ccc;
    overflow:hidden;
}
div.contain.red {
    background:red;
}
div.contain.yellow {
    background:yellow;
}
div.contain.blue {
    background:blue;
}
div.contain.green {
    background:green;
}
div.contain.purple {
    background:purple;
}
div.nav {
    background:#333;
    float:left;
}
ul, li {
    list-style:none;
    margin:0;
    padding:5px 10px;
}
a {
    text-transform: none;
    color:#fbfbfb;
}
.cont {
    display:none;
    background:#aaa;
    width:332px;
    margin:10px;
    float:right;
}
.cont-1 {
    display:block;
}
.expanse {
    display:block;
    width:50px;
}
.cont-1 .expanse {
    height:400px;
}
.cont-2 .expanse {
    height:150px;
}
.cont-3 .expanse {
    height:300px;
}
.cont-4 .expanse {
    height:200px;
}

JavaScript

$(".contain").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('red'),
            content1 = true,
            $(containBox).removeClass('yellow blue green purple'),
            content2 = false,
            content3 = false,
            content4 = false,
            content5 = false;
        } else {
        }
    });    
    $(linkTwo).click(function (event) {
        event.preventDefault();
        if (content2 === false) {
            $(containBox).addClass('yellow'),
            content2 = true;
            $(containBox).removeClass('red blue green purple'),
            content1 = false,
            content3 = false,
            content4 = false,
            content5 = false;
        } else {
        }
    });    
    $(linkThree).click(function (event) {
        event.preventDefault();
        if (content3 === false) {
            $(containBox).addClass('blue'),
            content3 = true;
            $(containBox).removeClass('red yellow green purple'),
            content1 = false,
            content2 = false,
            content4 = false,
            content5 = false;
        } else {
        }
    });
    $(linkFour).click(function (event) {
        event.preventDefault();
        if (content4 === false) {
            $(containBox).addClass('green'),
            content4 = true;
            $(containBox).removeClass('red yellow blue purple'),
            content1 = false,
            content2 = false,
            content3 = false,
            content5 = false;
        } else...