SO - 20725786

HTML

<div class="content-slide-menu" data-menu="1">
    <ul class="menu">
        <li id="link1"> <a href="#null" data-page="1">blah blah</a>

        </li>
        <li id="link2"> <a href="#null" data-page="2">twit twoo</a>

        </li>
    </ul>
</div>
<div class="content-slide">
    <div id="page1" class="content">
         <h3>blah blah</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
        <div class="dots"><span>...</span>
        </div>
    </div>
    <div id="page2" class="content">
         <h3>twit twoo</h3>

        <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
        <div class="dots"><span>...</span>
        </div>
    </div>
</div>
<div style="clear:both;"></div>
<div class="content-slide-menu" data-menu="2">
    <ul class="menu">
        <li id="link3"> <a href="#null" data-page="3">Sit Amet</a>

        </li>
        <li id="link4"> <a href="#null" data-page="4">lorem ipsum</a>

        </li>
    </ul>
</div>
<div class="content-slide">
    <div id="page3" class="content">
         <h3>Sit Amet</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
        <div class="dots"><span>...</span>
        </div>
    </div>
    <div id="page4" class="content">
         <h3>lorem ipsum</h3>

        <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
        <div class="dots"><span>...</span>
...

CSS

.content-slide-menu {
    float:left;
    width:220px;
    padding:0 10px;
}
.content-slide-menu li {
    list-style-type:none;
}
.content-slide-menu a {
    text-decoration:none;
    color:#2b2b2b;
    font-size:135%;
}
.content-slide-menu a:hover {
    color:#3ca3c5;
}
.content-slide {
    float:left;
    width:440px;
    margin-top:65px;
}
.content-slide .content {
    display:none;
}
.content-slide .content h3 {
    font-size: 150%;
    font-weight: bold;
}
.content-slide .content p {
    margin:5px 0;
    font-size:110%;
}
.dots {
    font-size:350%;
    font-weight:bold;
}
.active {
    color:#3ca3c5!important;
}


#footer {margin-top:800px;}

JavaScript

function showPage(menu, page) {
    $slider = $(".content-slide-menu[data-menu='" + menu + "']").first();
    $slider.next().children('.content').hide();
    $("#page" + page).show();
    $slider.find('a.active').removeClass("active");
    $("#link" + page).children().addClass('active');
}
function showAndScroll(menu, page) {
    showPage(menu, page);
    $('html, body').animate({
        scrollTop: $slider = $(".content-slide-menu[data-menu='" + menu + "']").first().offset().top
    }, 1000);
}
$(document).ready(function () {
    $(".menu a").click(function () {
        var $this = $(this),
            $slider = $this.closest('.content-slide-menu');
        showPage($slider.data("menu"), $this.data("page"));
    });
    $(".content-slide-menu").each(function(index, that) {
        showPage($(that).data('menu'), $(that).find("a").first().data('page'));
    });
});