Collapsing

**AJPayne** · September 1st, 2005, 2:13 PM

Hello,

I don't know if that is done with PHP or JavaScript, so I am posting it here (Mods, move this to the correct forums otherwise).

Basically, I have multiple forms on 1 page. What I want to do, is have displayed only links, and when users click on one of the links, the form will show up. If clicked once again, it will hide. Of course I also want the link name to change appropriately to something from "Link 1 >>" to "Link 1 <<." Much like vBulletin does on the main page of the forums.

My question is: how do you do it?

Thanks again,

H · September 1st, 2005, 3:56 PM

Well, you could accomplish it with either PHP or JavaScript. Basically you have to determine:

a) do I want it to occur regardless of whether JavaScript is enabled?
b) do I want it to happen instantaneously or have a refresh?

If you answered yes to a, then you're going with PHP. If you answered yes to question b, you're going with JavaScript. As far as I know vBulletin uses JavaScript, because I'm positive it's done instantaneously.

I'll have to confirm some code and eat some breakfast, then I'll post a possible solution for JavaScript.

**Kickersny.com** · September 1st, 2005, 5:01 PM

I do this on a lot of my sites. I write a small universal function call showHide() and it goes like this...

Code:

function showHide( objID ){
    var obj = document.getElementById( objID );
    var status = obj.style.display;
    if( status == 'block' ){
        obj.style.display = 'none';
    } else{
        obj.style.display = 'block';
    }
}

There are other ways to do it, but that's the basic one. objID is the id="foobar" attribute of the element in question. I also modified mine that sets a cookie with the state of the obj in question so the state is preserved when you return to the page. Obviously it's highly configurable.

Hope that helps!

H · September 1st, 2005, 5:01 PM

Alright, here's my example code: http://haugland.ca/toggle/

Basically what you do is add this to your head:

Code:

<script type="text/javascript">
	function showorhide(id) { 
		if (document.getElementById(id).style.display == "none") {
			document.getElementById(id).style.display = "block";
		} else {
			document.getElementById(id).style.display = "none";
		}
	}
</script>

Now you have to use links and elements to tell it what to collapse or expand. In my case, I used a simple link and a div.

Code:

<a href="#" onclick="showorhide('raw');" />Toggle</a><br /><br />
<div id="raw">This is a bunch of text yo... and more text because<br />
We want a lot of the text.</div>

The <a> tag: The href is set to '#' as we don't want to reload the page. The onclick is set to use the JavaScript function 'showorhide()'. Now, the text inside is to tell it what element you want to toggle, in our case, that element had the 'id' of 'raw' so that's what we put in there. Be sure to use single quotes around that text like in the example.

The <div> tag: I used a div tag because I felt like it... You could replace it with a table, image, list or whatever your heart desires, and also put whatever the hell you want in it. So basically the only thing you do with this element is give it an ID (which has to be UNIQUE), so that the JavaScript can discover the element.

If you need anymore help, just post again with what you're needing help with.

**Kickersny.com** · September 1st, 2005, 5:02 PM

Holy cow; Haugland and I share a brain. Pretty much identical function, too!

H · September 1st, 2005, 5:03 PM

Yeah.. Same minute.. I think we'll need to get Kayla to investigate which second each post was made. That is pretty crazy though.

**Kickersny.com** · September 1st, 2005, 5:05 PM

That's kinda creepy...are you stealing the source from my sites? or stalking me?

Either way I'm flattered.

H · September 1st, 2005, 5:36 PM

Pfft... We both know I took a JavaScript class last year... It was actually from memory from something I did over a year ago. Neat little function it is.

**ceo** · September 1st, 2005, 5:54 PM

So, are you implying that Kickers is stalking YOU, Haugland?

September 1st, 2005, 2:13 PM	#1 (permalink)
AJPayne I own you! Excelling Contributor Joined in Apr 2004 563 posts Gave thanks: 0 Thanked 3 times	Collapsing Hello, I don't know if that is done with PHP or JavaScript, so I am posting it here (Mods, move this to the correct forums otherwise). Basically, I have multiple forms on 1 page. What I want to do, is have displayed only links, and when users click on one of the links, the form will show up. If clicked once again, it will hide. Of course I also want the link name to change appropriately to something from "Link 1 >>" to "Link 1 <<." Much like vBulletin does on the main page of the forums. My question is: how do you do it? Thanks again,

September 1st, 2005, 5:01 PM	#3 (permalink)
Kickersny.com Surpass Fan Super #1 Joined in Aug 2004 Hosted on SH58 1,688 posts Gave thanks: 6 Thanked 7 times	I do this on a lot of my sites. I write a small universal function call showHide() and it goes like this... Code: function showHide( objID ){ var obj = document.getElementById( objID ); var status = obj.style.display; if( status == 'block' ){ obj.style.display = 'none'; } else{ obj.style.display = 'block'; } } There are other ways to do it, but that's the basic one. objID is the id="foobar" attribute of the element in question. I also modified mine that sets a cookie with the state of the obj in question so the state is preserved when you return to the page. Obviously it's highly configurable. Hope that helps! __________________ - Evan Charlton \| [site] \| Server - SH58

September 1st, 2005, 5:01 PM	#4 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,086 posts Gave thanks: 48 Thanked 131 times	Alright, here's my example code: http://haugland.ca/toggle/ Basically what you do is add this to your head: Code: <script type="text/javascript"> function showorhide(id) { if (document.getElementById(id).style.display == "none") { document.getElementById(id).style.display = "block"; } else { document.getElementById(id).style.display = "none"; } } </script> Now you have to use links and elements to tell it what to collapse or expand. In my case, I used a simple link and a div. Code: <a href="#" onclick="showorhide('raw');" />Toggle</a><br /><br /> <div id="raw">This is a bunch of text yo... and more text because<br /> We want a lot of the text.</div> The <a> tag: The href is set to '#' as we don't want to reload the page. The onclick is set to use the JavaScript function 'showorhide()'. Now, the text inside is to tell it what element you want to toggle, in our case, that element had the 'id' of 'raw' so that's what we put in there. Be sure to use single quotes around that text like in the example. The <div> tag: I used a div tag because I felt like it... You could replace it with a table, image, list or whatever your heart desires, and also put whatever the hell you want in it. So basically the only thing you do with this element is give it an ID (which has to be UNIQUE), so that the JavaScript can discover the element. If you need anymore help, just post again with what you're needing help with.

September 1st, 2005, 5:02 PM	#5 (permalink)
Kickersny.com Surpass Fan Super #1 Joined in Aug 2004 Hosted on SH58 1,688 posts Gave thanks: 6 Thanked 7 times	Holy cow; Haugland and I share a brain. Pretty much identical function, too! __________________ - Evan Charlton \| [site] \| Server - SH58

September 1st, 2005, 5:05 PM	#7 (permalink)
Kickersny.com Surpass Fan Super #1 Joined in Aug 2004 Hosted on SH58 1,688 posts Gave thanks: 6 Thanked 7 times	That's kinda creepy...are you stealing the source from my sites? or stalking me? Either way I'm flattered. __________________ - Evan Charlton \| [site] \| Server - SH58

September 1st, 2005, 3:56 PM	#2 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,086 posts Gave thanks: 48 Thanked 131 times	Well, you could accomplish it with either PHP or JavaScript. Basically you have to determine: a) do I want it to occur regardless of whether JavaScript is enabled? b) do I want it to happen instantaneously or have a refresh? If you answered yes to a, then you're going with PHP. If you answered yes to question b, you're going with JavaScript. As far as I know vBulletin uses JavaScript, because I'm positive it's done instantaneously. I'll have to confirm some code and eat some breakfast, then I'll post a possible solution for JavaScript.

September 1st, 2005, 5:03 PM	#6 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,086 posts Gave thanks: 48 Thanked 131 times	Yeah.. Same minute.. I think we'll need to get Kayla to investigate which second each post was made. That is pretty crazy though.

September 1st, 2005, 5:36 PM	#8 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,086 posts Gave thanks: 48 Thanked 131 times	Pfft... We both know I took a JavaScript class last year... It was actually from memory from something I did over a year ago. Neat little function it is.

September 1st, 2005, 5:54 PM	#9 (permalink)
ceo Senior Member Super #1 Joined in Jan 2005 1,546 posts Gave thanks: 70 Thanked 33 times	So, are you implying that Kickers is stalking YOU, Haugland?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread: