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>

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

$(function () {
    var content1 = true,
        content2 = false,
        content3 = false,
        content4 = false,
        content5 = false;

    $('a.one').click(function (event) {
        event.preventDefault();
        if (content1 === false) {
            $('div.contain').addClass('red'),
            content1 = true,
            $('div.contain').removeClass('yellow blue green purple'),
            content2 = false,
            content3 = false,
            content4 = false,
            content5 = false;
        } else {
        }
    });    
    $('a.two').click(function (event) {
        event.preventDefault();
        if (content2 === false) {
            $('div.contain').addClass('yellow'),
            content2 = true;
            $('div.contain').removeClass('red blue green purple'),
            content1 = false,
            content3 = false,
            content4 = false,
            content5 = false;
        } else {
        }
    });    
    $('a.three').click(function (event) {
        event.preventDefault();
        if (content3 === false) {
            $('div.contain').addClass('blue'),
            content3 = true;
            $('div.contain').removeClass('red yellow green purple'),
            content1 = false,
            content2 = false,
            content4 = false,
            content5 = false;
        } else {
        }
    });
    $('a.four').click(function (event) {
        event.preventDefault();
        if (content4 === false) {
            $('div.contain').addClass('green'),
            content4 = true;
            $('div.contain').removeClass('red yellow blue purple'),
            content1 = false,
            content2 = false,
            content3 = false,
            content5 = false;
        } else {
        }
    });
    $('a.five').click(function (event) {
        event.preventDefault();
        if (content5 === false) {
            $('div.contain').addClass('purple'),
            content5 = true;
           ...