CODEWITHSUNDEEP
javascriptcsshtml
connormcwood
connormcwood

Reputation: 333

Getting divs to close if another one opens with Javascript

Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.

Example: signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.

Current Code:

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("signin");
    var text = document.getElementById("signtext");
    var ele2 = document.getElementById("signup");
    var text2 = document.getElementById("signuptext");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "show";
        ele2.style.display = "block";
        text2.innerHTML = "hide";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
        ele2.style.display = "block";
        text2.innerHTML = "hide";
    }
}
function toggle2() {
    var ele2 = document.getElementById("signup");
    var text2 = document.getElementById("signuptext");
    var ele = document.getElementById("signin");
    var text = document.getElementById("signtext");
    if(ele2.style.display == "block") {
        ele2.style.display = "none";
        text2.innerHTML = "show";   
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
    else {
        ele2.style.display = "block";
        text2.innerHTML = "hide";
        ele.style.display = "block";
        text.innerHTML = "hide";
    }   
} 
</script>

Html :

<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>

Upvotes: 3

Views: 785

Answers (4)

HIRA THAKUR
HIRA THAKUR

Reputation: 17757

Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!

function toggle(id){

switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;

case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}

HTML

<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>

Upvotes: 1

swapnesh
swapnesh

Reputation: 26722

Try to grab concept from this, may not be a perfect, but still contain some learning part -

Check this working Fiddle - http://jsfiddle.net/j7LDD/

Working Code -

HTML PART - 

<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>

<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>

<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>

JS PART - 

<script>
function toggle( val ) {
    if( "signupbutton" == val ) {
    document.getElementById("signup").style.display = 'block';
    document.getElementById("signin").style.display = 'none';
    }
    else {
    document.getElementById("signin").style.display = 'block';
    document.getElementById("signup").style.display = 'none';
    }
}
</script>

Upvotes: 0

skparwal
skparwal

Reputation: 1084

Try this one:

function signUpIn(objId) {
   document.getElementById('signin').style.display = 'none';
   document.getElementById('signup').style.display = 'none';

   document.getElementById(objId).style.display = 'block';
}

Your html changes:

<div id="signin" style="display: block">

</div>    
<div id="signup" style="display: none">
</div>

<a href="javascript: signUpIn('signup');">Sign Up</a>
<a href="javascript: signUpIn('signin');">Sign In</a>

Check if it works for you.

Upvotes: 0

Vivek Sadh
Vivek Sadh

Reputation: 4268

You can invoke a function on "onclick" event and hide the div using CSS:Visibility property 

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

Upvotes: 0

Related Questions