Simple AJAX expanding text box?

Thats more like DHTML then AJAX

Take a shot over at Google..

 

It is very simpe. I can replicate the code, but it would be easier if you copy it:

www.watchonepieceepisodes.com

It uses the same thing you want and does other things when you view episode description. I took that direction because page load was pretty heavy with the descriptions for all episodes.

Any trouble you have post it here and I'll help.

Peace,

 

This is from a forum skin rewrite I'm working on -

function toggleShrink(from,targetID) {
	target=document.getElementById(targetID);
	with (target) {
		if (className.match(/\bexpanded\b/)) {
			className=className.replace(/\bexpanded\b/,'shrunk');
		} else if (className.match(/\bshrunk\b/)) {
			className=className.replace(/\bshrunk\b/,'expanded');
		}
	}
	from.blur();
}

spanList=document.getElementsByTagName('span');
for (t=0; t<spanList.length; t++) with (spanList[t]) if (id.indexOf('_sControl')!=-1) {
	
	innerHTML='<a href="#" onclick="toggleShrink(this,\''+id.replace(/_sControl/,'')+'\'); return false" class="sControl"><b></b>'+innerHTML+'</a>';
}

Code (markup):

put that javascript in an external file, call it right before your </body> tag. You then create the control with an ID that ends in the _sControl suffix, while the box you are expanding/shrinking is the same ID without the suffix.

<div id="shrinkBox" class="expanded">
	<h2><span id="shrinkBox_sControl">Title of this box</span></h2>
	<div class="content">
		Your content to shrink here
	</div>
</div>

Code (markup):

All the script does it trap the _sControl, and when you click on it changes the .expanded class to .shrunk or vice-versa. You can then use that change in CSS to set display:none on .content

.expanded .content {
	display:block;
}

.shrunk .content {
	display:none;
}

Code (markup):

Because we are effecting the wrapping div, you can also trap the empty 'b' tag I add via the javascript to use as an image indicating if it's open or closed.

You can see my WIP version of this on a dummy template here:
http://www.cutcodedown.com/projects/smfTemplate/template.html

Look for the headings with the + signs next to them. This version sets a cookie that the PHP will be able to 'remember' how you have it set on the next page load.

This can even be expanded out further/more versatile into an accordion script.
http://battletech.hopto.org/html_tutorials/accordion/

The advantage to this approach is that it keeps the HTML to a minimum, and since we start with an expanded class javascript off users get the full page.

Oh, and for those of you wondering why I'm not using onload, I dislike the 'jumping' effect in rendering onload has, since we are using javascript to write/modify content. By including it before we close </body> we hang rendering until the scripting has run, preventing that 'effect'. Really I'm increasingly moving away from onload as practical for a lot of these sorts of document setups.

 

Well, that's kind of who I was trying to write that javascript FOR. Since it auto-attaches to your 'control' and auto-swaps the class on your actual element, it requires very little .js understanding to implement. No messing with onload, no messing with manually doing 'onclick' in your markup. You just slap in two (or more) id's, and yer done.

I wanted as little javascript as I could get away with offloading as much of the gruntwork to CSS as possible, while at the same time having it parse to auto-attach all our methods.

... AND so long as your 'sets' of id's are unique it's safe to use more than once on a page. I'm amazed how often I see scripts for doing this that /FAIL/ on that simple variation.

 

Guys I'm working on a site for our Parks and Rec department here in my small town in Virginia. I'm their I.T. guy and no matter how many times I tell them I'm the network admin they still want me to do web development.

"computers is computers" they might say were I to argue more...

Anyway, the director of P & R wanted expanding navigation boxes all in one iframe on the page and this is exactly what I was looking for.

@deathshadow - Thank you for your generous sharing of such easy to use and edit code. You're a gentleman and a scholar. Thank you.

-Cheers