Content Reload

by Emily Humphrey

HTML

<div class="contain red">
    <div class="nav">
        <ul>
            <li><a href="#1" class="bck">&lt;</a></li>
            <li><a href="#2" class="fwd">&gt;</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.bck').click(function (event) {
        event.preventDefault();
        if (content1 === true) {
            $('div.contain').addClass('purple'),
            content5 = true,
            $('div.contain').removeClass('red'),
            content1 = false;
        } else if (content2 === true) {
            $('div.contain').addClass('red'),
            content1 = true,
            $('div.contain').removeClass('yellow'),
            content2 = false;
        } else if (content3 === true) {
            $('div.contain').addClass('yellow'),
            content2 = true,
            $('div.contain').removeClass('blue'),
            content3 = false;
        } else if (content4 === true) {
            $('div.contain').addClass('blue'),
            content3 = true,
            $('div.contain').removeClass('green'),
            content4 = false;
        } else {
            $('div.contain').addClass('green'),
            content4 = true,
            $('div.contain').removeClass('purple'),
            content5 = false;
        }
    });

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