how to simplify this code?

Question

0.00/5 (No votes)

See more:

, +

C#

function edit_user() {

    $(document).ready(function () {

        $("#profile").click(function () {
            $("#personal_details").show();
            $("#education_details").hide();
            $("#certification").hide();
            $("#cover_letter").hide();
            $("#professional_details").hide();
            $("#Resume_Headline").hide();
            $("#Project_Details").hide();
            $("#Skills").hide();
        });

        $("#Education_div").click(function () {
            $("#personal_details").hide();
            $("#education_details").show();
            $("#certification").hide();
            $("#cover_letter").hide();
            $("#professional_details").hide();
            $("#Resume_Headline").hide();
            $("#Project_Details").hide();
            $("#Skills").hide();

        });

        $("#course_div").click(function () {
            $("#personal_details").hide();
            $("#education_details").hide();
            $("#certification").show();
            $("#cover_letter").hide();
            $("#professional_details").hide();
            $("#Resume_Headline").hide();
            $("#Project_Details").hide();
            $("#Skills").hide();
        });
        $("#Coverletter_div").click(function () {
            $("#personal_details").hide();
            $("#education_details").hide();
            $("#certification").hide();
            $("#cover_letter").show();
            $("#professional_details").hide();
            $("#Resume_Headline").hide();
            $("#Project_Details").hide();
            $("#Skills").hide();
        });
        $("#professional_div").click(function () {
            $("#personal_details").hide();
            $("#education_details").hide();
            $("#certification").hide();
            $("#cover_letter").hide();
            $("#professional_details").show();
            $("#Resume_Headline").hide();
            $("#Project_Details").hide();
            $("#Skills").hide();
        });
        $("#attached_div").click(function () {
            $("#personal_details").hide();
            $("#education_details").hide();
            $("#certification").hide();
            $("#cover_letter").hide();
            $("#professional_details").hide();
            $("#Resume_Headline").show();
            $("#Project_Details").hide();
            $("#Skills").hide();
        });
        $("#project_div").click(function () {
            $("#personal_details").hide();
            $("#education_details").hide();
            $("#certification").hide();
            $("#cover_letter").hide();
            $("#professional_details").hide();
            $("#Resume_Headline").hide();
            $("#Project_Details").show();
            $("#Skills").hide();
        });
        $("#skill_div").click(function () {
            $("#personal_details").hide();
            $("#education_details").hide();
            $("#certification").hide();
            $("#cover_letter").hide();
            $("#professional_details").hide();
            $("#Resume_Headline").hide();
            $("#Project_Details").hide();
            $("#Skills").show();
        });

    });
}

Posted 19-Feb-14 19:53pm

RajeeshMenoth

Add a Solution

4 solutions

Solution 4

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.

HTML

<script>
$(document).ready(function() {
    $(".navigation").on("click", function() {
	$(".content").hide();
	$("#" + $(this).attr("id") + "_content").show();
    });

    // this initializes the view to the first item
    $("#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>

Posted 20-Feb-14 8:28am

Brian A Stephens

Updated 25-Feb-14 8:05am

v2

Comments

[no name] 21-Feb-14 0:20am

can u tell me where i wrote this code ? plz explain it

Brian A Stephens 25-Feb-14 14:09pm

I realized that I misunderstood what the navigation was controlling. Try my update for a complete solution.

Solution 1

Hide them all at the start, then only call show on the one you want.

Posted 19-Feb-14 20:06pm

OriginalGriff

Solution 2

use toggle function
refer to this site.
Hope it will help. :)

Posted 19-Feb-14 20:42pm

The14thNoah

Comments

[no name] 20-Feb-14 4:21am

am already tried that...

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

RajeeshMenoth · Accepted Answer · 2014-02-20T05:57:00

XML

<script>
function edit_user(getId) {
    // Array declaration
    var pushArray= new Array();
    // Get the id of recived item
    var receivedId = $(getId).attr("id");
    // Show the current item
    $('#'+receivedId).show();
    // Loop the parent div
    $('#data_editing > div').each(function(){
        var allId = $(this).prop('id');
        pushArray.push(allId);
    });
    getArray = $.grep(pushArray,function(n){ return(n) });
    var i = getArray.indexOf(receivedId);
    if(i != -1) {
        getArray.splice(i, 1);
    }
    for (var i = 0; i <= getArray.length; i++) {
        // Hide another div
        $('#'+getArray[i]).hide();
    };
}
</script>

<div class="edit-pf-dtails-1-dtail" style="cursor:pointer;" id="profile" runat="server" onclick="edit_user(personal_details);">Profile Details</div>
<div class="edit-pf-dtails-1-dtail" style="cursor:pointer;" id="Education_div" runat="server" onclick="edit_user(education_details);">Education</div>
<div class="edit-pf-dtails-1-dtail" style="cursor:pointer;" id="course_div" runat="server" onclick="edit_user(certification);">Courses and Certifications</div>
<div class="edit-pf-dtails-1-dtail" style="cursor:pointer;" id="Coverletter_div" runat="server" onclick="edit_user(cover_letter);">CoverLetter</div>
<div class="edit-pf-dtails-1-dtail" style="cursor:pointer;" id="professional_div" runat="server" onclick="edit_user(professional_details);">Professional Details</div>
<div class="edit-pf-dtails-1-dtail" style="cursor:pointer;" id="attached_div" runat="server" onclick="edit_user(Resume_Headline);">Attached Resume</div>
<div class="edit-pf-dtails-1-dtail" style="cursor:pointer;" id="project_div" runat="server" onclick="edit_user(Project_Details);">Projects</div>
<div class="edit-pf-dtails-1-dtail" style="cursor:pointer;" id="skill_div" runat="server" onclick="edit_user(Skills);">IT Skills</div>

Thank u Nikhil (PHP Developer at Phases)