Need help condensing show/hide jquery code

[andrewliu]

Hello,

I have these div tags, they're very similar but I just need to change the IDs. Is there anyway to condense this code?

$(document).ready(function(){

 //Full Name
 var changeName = $('#changeName');
 var cancelName = $('#cancelName');
 var fullnameDisplay = $('#fullnameDisplay');
 var fullnameChange = $('#fullnameChange');
 var helperName = $('#helperName')
 changeName.click(function(){
	 	$(this).hide();
		cancelName.show();//link
		fullnameChange.show();//inputs and all that
		fullnameDisplay.hide();//display item
		helperName.show();//instructions
		cancelName.click(function(){
			$(this).hide();
			changeName.show();//link
			fullnameChange.hide();
			fullnameDisplay.show();
			helperName.hide();
	 		
		});
 });
 
 //Email
 var changeEmail = $('#changeEmail');
 var cancelEmail = $('#cancelEmail');
 var emailDisplay = $('#emailDisplay');
 var emailChange = $('#emailChange');
 var helperEmail = $('#helperEmail')
 changeEmail.click(function(){
	 	$(this).hide();
		cancelEmail.show();//link
		emailChange.show();//inputs and all that
		emailDisplay.hide();//display item
		helperEmail.show();//instructions
		cancelEmail.click(function(){
			$(this).hide();
			changeEmail.show();//link
			emailChange.hide();
			emailDisplay.show();
			helperEmail.hide();
	 		
		});
 });
 
  //Password
 var changePass = $('#changePass');
 var cancelPass = $('#cancelPass');
 var passDisplay = $('#passDisplay');
 var passChange = $('#passChange');
 var helperPass = $('#helperPass')
 changePass.click(function(){
	 	$(this).hide();
		cancelPass.show();//link
		passChange.show();//inputs and all that
		passDisplay.hide();//display item
		helperPass.show();//instructions
		cancelPass.click(function(){
			$(this).hide();
			changePass.show();//link
			passChange.hide();
			passDisplay.show();
			helperPass.hide();
	 		
		});
 });
 
 
});

Thanks

[Taywin]

How about using arrays? You could either use 5 of size-3 arrays or 3 of size-5 arrays.

[andrewliu]

well this is just a sample, I will have a lot more data but very similar to this structure. I'm not sure how to use array in this..

I can't just do some switching of ID's or something?

Or if i separate my contents by div tags, will I be able to code something where the link will only correspond to the div tag that the link is in?

[Airshow]

Andrew,

If each group of five elements has a common container (eg. a div, p or tr), then you can try this:

Identify everything with classes instead of ids.

• Give #change... elements eg. class="change"
• Give #cancel... elements eg. class="cancel"
• Give #...Display elements eg. class="display"
• Give #...Change elements eg. class="change2"
• Give #helper... elements eg. class="helper"

(You can keep your original ids if you need them for something else)

Now work everything relative to the common container, derived from the clicked element

$(".change").click(function() {
		var $container = $(this).hide().closest("div");//or .closest("p") or .closest("tr") etc.
		$container.find(".cancel").show();//link
		$container.find(".change2").show();//inputs and all that
		$container.find(".display").hide();//display item
		$container.find(".helper").show();//instructions
	});
	$(".cancel").click(function() {
		var $container = $(this).hide().closest("div");
		$container.find(".change").show();//link
		$container.find(".change2").hide();//inputs and all that
		$container.find(".display").show();//display item
		$container.find(".helper").hide();//instructions
	});

You will see that I un-nested the .cancel click handler. As far as I can see, there's no point re-attaching exactly the same functionality every time the .change handler fires.

Working relative to a clicked element is particularly efficient in an extensive DOM, because there's no need to search the whole DOM for any element after the handlers have been attached. Each clicked element identifies itself (as this ) then closest() and find() search for the associated elements in (typically) a very limited part of the DOM.

Airshow

[andrewliu]

Interesting. It works for my cancel and change buttons, but its not triggering display or helper.

This is how my code looks like

<div class='infoToolContain'> 
<div class='perTool'>Name</div>
<div class='editButton'>
<a href='#' class='changePerInfo change' id='changeName'>Change</a>
<a href='#' class='cancelPerInfo cancel' id='cancelName' style='display:none;'>Cancel</a>
</div>
</div>

<div class='infoCurrent display' id='fullnameDisplay'>
Andrew Liu
</div>
<div class='infoCurrent helper' id='helperName' style='display:none;'>
Enter the name that you wrote down on your homework assignments when you were in elementary school.
</div>

<div class='showChanges change2' id='fullnameChange' >
<div>First Name:<input type='text' name='fname' >
</div>
<div>Last Name:<input type='text' name='lname' >
</div>
<div>
<a href='#' class='small button white' style='clear:both;'>Save</a>
</div>
</div>

[andrewliu]

hmmm i see how this works. looks like there were closed div tags after my <a href> tags.

Looks like I need to re-css this...

Thank you for your help!

But if I can't be able to redo my css in the same way I have it, is there a way to work with what I have?

[Airshow]

Looks like I need to re-css this...

Thank you for your help!

But if I can't be able to redo my css in the same way I have it, is there a way to work with what I have?

By leaving your original styles in there (as you have done), you don't necessarily need to touch your style sheet (assuming it was any good in the first place).

The new classnames can exist solely for identification by the javascript and not have styles associated with them unless it is convenient to do so, for example .cancel and .helper could be set to display:none in the stylesheet rather than in HTML (saves a few bytes of bandwidth).

Airshow

[andrewliu]

yeah, I just have it all in the front so i dont have to keep going to different pages when i need to change something. After I'm done setting my page up, thats when I move all my styles to a stylesheet.

I fixed the problem, I just changed all my div tags to a span tag and just wrapped everything in a div tag.

Thanks for your help!

[Airshow]

I fixed the problem, I just changed all my div tags to a span tag and just wrapped everything in a div tag.

Andrew,

Conversion to spans is maybe not necessary given that closest() has the full power of jQuery selectors avaialble to it. You can punch through any number of ancestor divs to arrive at the one you want by using the right selector.

var $container = $(this).hide().closest("div.infoToolContain");

Airshow

[andrewliu]

ohhhhh riiiiiiiiiiighhhhhttt!!! yes! brilliant!

Thank you :)