Sliding Page Sections

jQuery ftw - show one section only

by Mindy McAdams

HTML

<section id="sec1" class="all-secs">
    <h1>Here Is Section 1</h1>
    <p>Click anywhere!</p>
    <p>Proin vel velit ac nulla dignissim suscipit ut sed libero. Praesent malesuada porta vehicula. Sed hendrerit pellentesque lectus ac bibendum. Praesent a volutpat orci. Morbi congue semper eros, et condimentum libero posuere in. Quisque id molestie nisi, non pretium massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed id lectus cursus, fermentum dolor consectetur, feugiat tellus. Sed aliquam, neque ac placerat tincidunt, massa nunc placerat tortor, vel ultrices lectus quam sit amet metus.</p>
</section>

 <section id="sec2" class="all-secs">
    <h1>Here Is Section 2</h1>
    <p>Click anywhere again!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut malesuada dolor. Curabitur ullamcorper viverra felis, at consequat sapien mattis id. Nam finibus suscipit feugiat. Aliquam accumsan nunc tellus, quis dictum orci commodo sit amet. Cras finibus pulvinar lorem, quis luctus est molestie sit amet. Ut tempus tempus gravida. Donec a pretium sem. Morbi vitae ex lacus. Cras euismod diam diam, in molestie urna condimentum posuere. Pellentesque rutrum nisi urna, in euismod ipsum pellentesque fringilla. Aenean ultrices ornare mattis.</p>
</section>

<section id="sec3" class="all-secs">
    <h1>Here Is Section 3</h1>
    <p>Again! Again! Sed ac odio non ipsum eleifend accumsan. Integer ultricies, magna a vehicula lobortis, velit metus vestibulum justo, et accumsan sem mi eget purus. Ut eget volutpat tortor. Phasellus bibendum nulla a ipsum pharetra rhoncus. Aliquam erat volutpat. Quisque et tempus massa. Ut gravida nisl at sodales tristique.</p>

<p>Aliquam viverra rutrum quam vitae efficitur. Vivamus diam eros, tristique ut eros eget, faucibus suscipit elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a auctor magna. Maecenas nibh urna, finibus a urna...

CSS

body {
    font-family: Calibri, sans-serif;
    margin: 0;
}
h1 {
    margin: 0;
}
.all-secs {
    margin: 0;
    padding: 40px;
    cursor: pointer;
}
#sec1 {
    background: #CC3910;
    color: #fff;
}
#sec2 {
    background: #F1F2C0;
    color: #000;
}
#sec3 {
    background: #332F29;
    color: #fff;
}
#sec4 {
    background: #8FA68E;
    color: #fff;
}

JavaScript

// if you resize the Result pane, RUN again

// make each section fill window vertically (height)
$('.all-secs').css( {'height': (  $(window).height() )  } );

$('.all-secs').hide();

$('#sec1').show();

$('body').on('click', '.all-secs', function() {
    // slide this section out of sight
    $(this).slideToggle();
    
    // show the next section - unless we are on the last section
    if ( $(this).attr("id") != "sec4" ) {
    	$(this).next().slideToggle();
    } else {
        $('#sec1').slideToggle();
    }
});