[SOLVED] Show&Hide Div Box

[Maska]

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]

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]

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

[Maska]

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]

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]

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]

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!