HTML5 Loading data-section when click on Navigation link

Question

I am having some road blocks getting this going. I have 4 navigation links and within the content container, I have declared a handful sections and have id tagged them accor

Answer 1

You have a typo here (contnet):

$("#contnet section").fadeIn();

does that fix it?

Also, you never use the id variable which you have defined.

Answer 2

This will defiantly work:

$("a").on("click", function(e) {
    e.preventDefault();
    var sectionID = '#'+ $(this).data("section");
    $("#content section:visible").fadeOut();
    $(sectionID).fadeIn();
});

SEE WORKING FIDDLE

Answer 3

Remove '#' in data-section at navigation

Example:
data-section="about"

not "#about"

Answer 4

This could be work:

$("a").bind("click", function(e) {
    e.preventDefault();
    var id = $(this).data("section");
      $("#content section:visible").fadeOut();
      $(id).fadeIn();
});