Click here to Skip to main content
15,881,139 members
Search within:


hide and show problem in jquery?
Please Sign up or sign in to vote.
1.00/5 (1 vote)
XML
<div class="edit-pf-out">
<div class="edit-pf-in">
<div class="edit-pf-dtails-1">
<div class="edit-pf-dtails-1-dtail" style="cursor:pointer;" id="profile" runat="server">Profile Details</div>
<div class="edit-pf-dtails-1-dtail" style="cursor:pointer;" id="Education_div" runat="server">Education</div>


XML
<div class="edit-pf-dtails-2">
<div class="edit-rgt" id="personal_details" runat="server">
<div class="edit-rght-1">Fullname :</div>
<div class="edit-rght-2">Asharaaf</div>
<div class="edit-rght-1">Gender:</div>
<div class="edit-rght-2">Male</div>
<div class="edit-rght-1">Date of Birth:</div>
<div class="edit-rght-2">10/10/1990</div>
<div class="edit-rght-1">Marital status:</div>
<div class="edit-rght-2">Single</div>
<div class="edit-rght-1">Email :</div>
<div class="edit-rght-2">nuahshb@gmail.com</div>
<div class="edit-rght-1">Mobile :</div>
<div class="edit-rght-2">94479450654123</div>
<div class="edit-rght-1" style="height:50px;">Address :</div>
<div class="edit-rght-2" style="height:50px;">Sevika Pattamb</div>
<div class="edit-rght-1">State :</div>
<div class="edit-rght-2">Kerala</div>
<div class="edit-rght-1">Country :</div>
<div class="edit-rght-2">India</div>
<div class="edit-rght-1">Pin/Zip :</div>
<div class="edit-rght-2">678301</div>
<div class="edit-rght-1">Passport Number:</div>
<div class="edit-rght-2">K12345</div>
</div>

<div class="edit-rgt" id="education_details" runat="server">
<div class="edit-rght-1">Highest Qualification:</div>
<div class="edit-rght-2">Mtech.IT</div>
<div class="edit-rght-1">University :</div>
<div class="edit-rght-2">Anna University Chennai</div>
<div class="edit-rght-1">College :</div>
<div class="edit-rght-2">Govt College</div>
<div class="edit-rght-1">% of Mark :</div>
<div class="edit-rght-2">80</div>
<div class="edit-rght-1">Arrears :</div>
<div class="edit-rght-2">No</div>
<div class="edit-rght-1">Year of Pass :</div>
<div class="edit-rght-2">2012</div>









above one is my candidate personal page..when candidate click the profile detail on left side the particular details display on right side..at that time hide the courses details
Posted
Add a Solution
Comments
Ahmed Bensaid 18-Feb-14 10:31am    
Did you try : $("#education_details").hide() ?
[no name] 18-Feb-14 10:33am    
its not working..can u expand the code details..
Ahmed Bensaid 18-Feb-14 10:40am    
Ah ok ... sorry I didn't see that your elements were "runat=server" ...
You can use my above code with the client_id of your elements.
Otherwise, you can add a css class to your div like this :
<div class="edit-rgt education_details" id="education_details" runat="server">
And then use this code :
$(".education_details").hide();
[no name] 19-Feb-14 0:18am    
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();
});

});
}
no its working i wanted to simplifying this code..can u help me..?
Ahmed Bensaid 19-Feb-14 5:36am    
Maybe you can simplify this code by using jQuery Toggle() function :
http://api.jquery.com/toggle/

1 solution

If this is Profile Details

HTML
<div id="1">
<div id="2">
<div id="3"></div></div></div>


i suggest you add one more div above like this

HTML
<div id="pd">
  <div id="1" >
  <div id="2" >
  <div id="3" >
</div>


in jquery
JavaScript
 $("#skill_div").click(function () {
     
     $(#pd).show(); or hide whatever you want

}
 
Share this answer
 
Posted
Add a Solution

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

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
jQuery toggle show/hide
Hide or show item using jquery array
How to make form feild dropdown hide/show using jquery and javascript in HTML
Hide and ShowDatatable jQuery
How to hide show table in jquery
show/hide div ___without jQuery
Show and hide message in jQuery
hide show problem............................
Show hide a single image in repeater using jquery
Show/Hide DIV using JQuery

Advertise
Privacy
Cookies
Terms of Use
Last Updated 20 Mar 2014
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900