How to add plus sign/minus sign to expand or contract page

Get Started
1

H I’m thinking, is it Javascript? How do you add these plus sign to web pages so that they can expand of contract, just like sitepoint or MSN.
This really saves space and can eliminate the need to scroll.

I want to add this feature to my website, that allows the user to click on a plus sign and cases a div to expand so that alot of data is visible.

Any ideas?

Thanks everyone,

IC

2

Yes it is Javascript that you would want to use. I am sure there is something in JQuery but I can’t remember off hand.

3

It doesnt have to be jquery I believe. Create a function that will display the field then onclick = turning that function to false. if function = false then set to true which will display it again. Ajax can do this I believe.

4

It doesn’t have to be Ajax, unless you’re only pulling the hidden data onto the page when the + is clicked.

If you’re just generating all the data, then toggling show/hide when the button is clicked, that’s only a couple of lines of Javascript.

5

Here are some code you can use. May need some modification:

var slideInUse = new Array();

function Slide(objId, options) {
this.obj = document.getElementById(objId);
this.duration = 1;
this.height = parseInt(this.obj.style.height);

if(typeof options != 'undefined') { this.options = options; } else { this.options = {}; }
if(this.options.duration) { this.duration = this.options.duration; }
	
this.up = function() {
	this.curHeight = this.height;
	this.newHeight = '1';
	if(slideInUse[objId] != true) {
		var finishTime = this.slide();
		window.setTimeout("Slide('"+objId+"').finishup("+this.height+");",finishTime);
	}
}

this.down = function() {
	this.newHeight = this.height;
	this.curHeight = '1';
	if(slideInUse[objId] != true) {
		this.obj.style.height = '1px';
		this.obj.style.display = 'block';
		this.slide();
	}
}

this.slide = function() {
	slideInUse[objId] = true;
	var frames = 30 * duration; // Running at 30 fps

	var tIncrement = (duration*1000) / frames;
	tIncrement = Math.round(tIncrement);
	var sIncrement = (this.curHeight-this.newHeight) / frames;

	var frameSizes = new Array();
	for(var i=0; i < frames; i++) {
		if(i < frames/2) {
			frameSizes[i] = (sIncrement * (i/frames))*4;
		} else {
			frameSizes[i] = (sIncrement * (1-(i/frames)))*4;
		}
	}
	
	for(var i=0; i < frames; i++) {
		this.curHeight = this.curHeight - frameSizes[i];
		window.setTimeout("document.getElementById('"+objId+"').style.height='"+Math.round(this.curHeight)+"px';",tIncrement * i);
	}
	
	window.setTimeout("delete(slideInUse['"+objId+"']);",tIncrement * i);
	
	if(this.options.onComplete) {
		window.setTimeout(this.options.onComplete, tIncrement * (i-2));
	}
	
	return tIncrement * i;
}

this.finishup = function(height) {
	this.obj.style.display = 'none';
	this.obj.style.height = height + 'px';
}

return this;

}

6

For future reference can you wrap code in [ code ] tags please…And i wasnt saying it is ajax I said it could be done in ajax most likely

7

Please ensure that with scripting off all the content is visible rather than hidden.

8

google on show hide javascript, and you will have plenty of examples to choose

you can also try show hide css, and get some alternatives

9

First I want to thank everyone for the contribution.

I googled it, however, this is why I like to come to the forum rather then using google. I do not know Javascript and I don’t want to copy and paste a script filled with bugs or that are none compliant in all browsers.

Since I don’t know Javascript, it will be difficult to spot a problem or a bad script.

In this forum I can have people “authenticate” the script by asking questions/suggestions.

Anyway, I found several but again I don’t know which is better.

This one looks promising. http://www.cssnewbie.com/showhide-content-css-javascript/

What are your thoughts?

Thanks everyone - Happy New Year.

Iconic Creator

10

Why not try it. There looks to be nothing wrong with that site.

11