Saturday 15 August 2015

html - Getting divs to close if another one opens with Javascript -


Actually I have a signup and signin and I have these two divids that appear on click of a link and disappear But I want to close one when another is clicked and then opened.

Example: The signin area is open and the signup button is clicked. I want to disappear for the signin area and

the current code to appear for the signup content:

  & lt; Script language = "javascript" & gt; Function toggle () {var ele = document.getElementById ("signin"); Var text = document.getElementById ("signtext"); Var ele2 = document.getElementById ("signup"); Var text2 = document.getElementById ("signup text"); If (ele.style.display == "block") {ele.style.display = "none"; Text.innerHTML = "Show"; Ele2.style.display = "block"; Text2.innerHTML = "Hide"; } Other {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 ("signup text"); 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"; } And {ele2.style.display = "block"; Text2.innerHTML = "Hide"; Ele.style.display = "block"; Text.innerHTML = "hide"; }} & Lt; / Script & gt;   

HTML:

  & lt; Div id = "signin" style = "display: none" & gt; & Lt; Form Action = "Edit Login Php" method = "Post" & gt; & Lt; P & gt; Username: & lt; Input type = "article" id = "user name" & gt; & Lt; / P & gt; & Lt; P & gt; Password: & lt; Input type = "password" id = "password" & gt; & Lt; Input type = "submit" value = "submit" & gt; & Lt; / P & gt; & Lt; / Form & gt; & Lt; / Div & gt; & Lt; Div id = "signup" style = "display: none" & gt; & Lt; H1 & gt; Nazar-e-Bu & lt; / H1> & Lt; / Div & gt;    

Try it out. There is no need to create two separate functions. Function = Better code codec!

  function toggle (id) {switch} {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 ('Sign In') style.display = 'None'; break; }   

HTML

  & lt; Div id = "signin" onclick = "toggle (this.id)" & gt; Sign-in & lt; / Div & gt; & Lt; Div id = "signup" onclick = "toggle (this.id)" & gt; Sign up & lt; / Div & gt;    

No comments:

Post a Comment