Single page hide/show section based on current position

Question

I\'m working on a single page websites with each page organized into section tags. Every section is placed on top of each other. I need a way with jquery, where based on cur

Answer 1

You should give each section an id, ie.

.

Change your css for section to include a display: none attribute

Use the following JS code:

$(document).ready(function() {
    $('section').eq(0).show();
    $('navbar-nav').on('click', 'a', function() {
        $($(this).attr('href')).show().siblings('section:visible').hide();
    });
});

Or if you follow strict ordering (ie. about is first, services second, etc.):

$(document).ready(function() {
    $('section').eq(0).show();
    $('.navbar-nav').on('click', 'li', function() {
        $('section').eq($(this).index()).show().siblings('section:visible').hide();
    });
});

Either method allows for dynamic content, although personally I'd use the last method.