Question

I am no stranger to front-end development, but I have come across a requirement by a client which I have never done before, and I would appreciate it if someone can point me into the right direction.

I have 7 <section> tags within my index.html. Each section represents one of the site navigation link. so “Home” link will show “home section” and so on. And the requested section gets populated in the main-content view/wrapper.

Usually, I will employ a MVC framework to get this functionality going. However, I am asked not to implement MVC. My thoughts were to find out which navigation link was clicked and then load the particular section into the main-content-wrapper.

How can I make this happened so that main-content-wrapper’s height is adjusted accordingly, and there is a browser scroll bar if needed? Because some sections have a lenghty content.

By the way, main-content-wrapper’ overflow has been set to ‘auto’.

Answer 1

If you’re populating all the section-s on your page you can try this – http://jsfiddle.net/Fyhm7/

HTML

<a href="#" data-section="#home">Home</a>
<a href="#" data-section="#products">Products</a>
<a href="#" data-section="#contact">Contact</a>

<section id="home">Home</section>
<section id="products">Products</section>
<section id="contact">Contact</section>

JS

$("a").on("click", function() {
    var id = $(this).data("section");

    $("section:visible").fadeOut(function() {
        $(id).fadeIn();
    });
});