The accepted solution seems overly complicated, seeing that it can be done in a few lines (as OriginalGriff suggested).
EDIT: I realize now that the navigation items are distinct from the content they control (the HTML was never provided, so I didn't catch that). To coordinate them, there needs to be an attribute connecting each navigation item to its corresponding content item. In the example below, I use a naming convention on the ID itself. You could alternately use a
data-
attribute on the navigation item that refers to the ID of the content item.
<script>
$(document).ready(function() {
$(".navigation").on("click", function() {
$(".content").hide();
$("#" + $(this).attr("id") + "_content").show();
});
$("#profile").click();
});
</script>
<div class="navigation" id="profile">Profile Details</div>
<div class="navigation" id="Education">Education</div>
<div class="navigation" id="course">Courses and Certifications</div>
<div class="navigation" id="Coverletter">CoverLetter</div>
<div class="navigation" id="professional">Professional Details</div>
<div class="navigation" id="attached">Attached Resume</div>
<div class="navigation" id="project">Projects</div>
<div class="navigation" id="skill">IT Skills</div>
<div class="content" id="profile_content">Profile Details ...</div>
<div class="content" id="Education_content">Education ...</div>
<div class="content" id="course_content">Courses and Certifications ...</div>
<div class="content" id="Coverletter_content">CoverLetter ...</div>
<div class="content" id="professional_content">Professional Details ...</div>
<div class="content" id="attached_content">Attached Resume ...</div>
<div class="content" id="project_content">Projects ...</div>
<div class="content" id="skill_content">IT Skills ...</div>