[SOLVED] Show&Hide Div Box

Maska · #1 Sep 29th, 2007, 13:21

Hello,
I have a show&hide div box js. and i want to invert the function on it.
I mean, when i open the page when the script are instaled, the script is set to show the div box, and have the option to Close the div box;
I want to invert the function like when i open the page, to not show the div box , just the "OPEN" option to open the div box and close then if the users want.
Here is my JS. file:

Code: Select all

var flag
function closeDivArea(name, name2){
    if (this[name+"_flag"]==undefined){
        this[name+"_flag"] = false
    }
    this[name+"_flag"] = !this[name+"_flag"];
    var obj = document.getElementById(name);
    obj.style.display = (this[name+"_flag"]==false)? "" : "none";
    
    var obj = document.getElementById(name2);
    obj.innerHTML = (this[name+"_flag"]==false)? "CLOSE" : "OPEN";
}

And this is my code:

Code: Select all

<div style="width:310px; height:16px;">
                
<div style="float:left; width:310px;" align="left"><a id="login" href="javascript:closeDivArea('cont','login');">CLOSE</a></div>

</div>

<div id="cont" style="width:310px;" align="center">
        
"MY DIV BOX CONTENT"

</div>

Sorry for my english and thanks in advance anyone give me a little help...

Rakuli · #2 Sep 29th, 2007, 23:55

Okay you could have a function that toggles the area, this one will completely remove the space from where the div was.

Code: Select all

<script type="text/javascript">

function toggle(obj, lnk)
{
    obj = document.getElementById(obj);
    
    if (obj.style.display != 'block')
    {
		obj.style.display = 'block';
		lnk.innerHTML = 'Close';
	} else {
		obj.style.display = 'none';
		lnk.innerHTML = 'Open';
	}
}
</script>
<a href="javascript:void()" onclick="toggle('cont', this)">Open</a>

<div id="cont" style="display:none;">

Hello Div COntent

</div>

It seems like your code is doing a lot more work than it has to.

Cheers

alexgeek · #3 Sep 30th, 2007, 01:41

I tried doing a code like this previously,
but mine was pretty bad.
May use this thanks

Maska · #4 Sep 30th, 2007, 08:37

Quote:

Originally Posted by Rakuli

Hello Div Content

Very nice answer, very useful and very funny too!

Works perfectly!
Thanks again Rakuli; like usually, you solve my problem successfully and professionally too...
I am verry happy becouse i find this professional forum with so kind members too, so i put a link on my site, like my gratefully, on www.jocurigratuit.ro (it is a games site). I don`t know how much it will help but this forum must have more visitors becose it deserve

If the admin have a small banner 88x31 px. i will add also.
Thanks again Rakuli!

Maska · #5 Oct 1st, 2007, 10:47

It is posible to use two java scripts like this one, on the same page, in the differend locations without confuse the elements script?
I try to use this js. two times in the same page in differend locations and the functions works conflicting, simultaneous.
Thanks anyone give me the right solution!

Rakuli · #6 Oct 1st, 2007, 10:57

This should work without any issue at all.

You just need to specify the name of the div you want to toggle and use the 'this' keyword to pass the reference to the link.

ie.

<a href="javascript:void()" onclick="toggle('div1', this)">Toggle Div1</a>

<a href="javascript:void()" onclick="toggle('div2', this)">Toggle Div 2</a>

etc..

Maska · #7 Oct 1st, 2007, 11:04

Quote:

Originally Posted by Rakuli

This should work without any issue at all.

My best friend forever!
I feel must pay you for every answer i get from you, insomuch that i like your fast answer!

Thank you again Rakuli!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Show/Hide Div + change image=HELP	Webill	JavaScript Forum	3	May 11th, 2008 15:08
CSS Show Hide with JS	abis123	JavaScript Forum	4	Dec 13th, 2007 05:39
Show/Hide JS	pa007	JavaScript Forum	0	Apr 6th, 2007 19:18
Show and Hide Text - how do I do that?	Love2Java	JavaScript Forum	1	Mar 29th, 2007 00:23
Show/Hide Div Help	Trebz	JavaScript Forum	2	Feb 21st, 2006 22:37

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] Show&Hide Div Box

[SOLVED] Show&amp;Hide Div Box

[SOLVED] Show&Hide Div Box