News Feed

by Dan Wright

HTML

<div id="newsFeed">
    <div id="section">
        <div id="NewsFeedContainer1">
            <div class="NewsFeed"> <a href="#">News Feed</a>

            </div>
            <div class="NewsFeed4"> <a href="#">New News Feed 4</a>

            </div>
            <div class="NewsFeed5"> <a href="#">New News Feed 5</a>

            </div>
            <div class="NewsFeed6"> <a href="#">New News Feed 6</a>

            </div>
        </div>
        <div id="NewsFeedContainer2">
            <div class="NewNewsFeed"> <a href="#">New News Feed</a>

            </div>
            <div class="NewNewsFeed1"> <a href="#">New News Feed 1</a>

            </div>
            <div class="NewNewsFeed2"> <a href="#">New News Feed 2</a>

            </div>
            <div class="NewNewsFeed3"> <a href="#">New News Feed 3</a>

            </div>
        </div>
        <div id="NewsFeedContainer3">
            <div class="NewNewsFeed"> <a href="#">New News Feed 2</a>

            </div>
            <div class="NewNewsFeed7"> <a href="#">New News Feed 7</a>

            </div>
            <div class="NewNewsFeed8"> <a href="#">New News Feed 8</a>

            </div>
            <div class="NewNewsFeed9"> <a href="#">New News Feed 9</a>

            </div>
        </div>
    </div>
    <div id="start"> <a href="#">start</a>

    </div>
    <div id="next"> <a href="#">next</a>

    </div>
    <div id="more"> <a href="#">more</a>

    </div>

CSS

#newsFeed {
    width: 33%;
    height: auto;
}
#section {
    display: inline-block;
    width: 150px;
    height: 100px;
    margin: 5px;
    background-color: rgb(119, 3, 97);
}
#section a {
    color: rgb(256, 256, 256);
    text-decoration: none;
    float: left;
    margin-left: 5px;
}
#hidden {
    display: none;
}
#start {
    margin-left: 5px;
}
#next {
    margin-left: 5px;
}
#more {
    margin-left: 5px;
}
#NewsFeedContainer1, #NewsFeedContainer2, #NewsFeedContainer3 {
    display: none;
}

JavaScript

$(document).ready(function () {
    start();
    next();
    more();
});

function start(){

    $('#start a').click(function(){
		if ($('#NewsFeedContainer2').is(':visible')){
		$('#NewsFeedContainer2').hide();
		$('#NewsFeedContainer3').show();
		}
        else if ($('#NewsFeedContainer1').is(':visible')){
		$('#NewsFeedContainer1').hide();
		$('#NewsFeedContainer3').show();
		}
        else {
        $('#NewsFeedContainer3').show();
        }
    });
}
function next(){

    $('#next a').click(function(){
		if ($('#NewsFeedContainer1').is(':visible')){
		$('#NewsFeedContainer1').hide();
		$('#NewsFeedContainer2').show();
		}
        else if ($('#NewsFeedContainer3').is(':visible')){
		$('#NewsFeedContainer3').hide();
		$('#NewsFeedContainer2').show();
		}
        else {
        $('#NewsFeedContainer2').show();
        }
    });
}
function more(){

    $('#more a').click(function(){
		if ($('#NewsFeedContainer3').is(':visible')){
		$('#NewsFeedContainer3').hide();
		$('#NewsFeedContainer1').show();
		}
        else if ($('#NewsFeedContainer3').is(':visible')){
		$('#NewsFeedContainer3').hide();
		$('#NewsFeedContainer1').show();
		}
        else {
        $('#NewsFeedContainer1').show();
        }
    });
}