Content Reload

by Emily Humphrey

HTML

<div class="contain">
    <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>
        </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.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

$(".cont").each(function () {
    
    var postTop = $(this).offset().top - 60,
        postBottom = $(this).height() + postTop - 20;
    
    $(this).children(".post-title").css("color", "blue");
    
});

if()