jQuery slideToggle() method helps us to hide and show the matched elements. This is when the lower portion of the element slides up and down the page.
<div id="prelogin" class="prelogindiv">Login</b></div><div id="login" class="logindiv" > Username: <input id="Text1" type="text" /></p> <p> Password: <input id="Password1" type="password" /></p> <p> <input id="Button1" type="button" value="Login"/></p></div>
Defined styles for the two div I have used in the code above.
<style>.prelogindiv{background:#cc99ff;width:200px;height:20px;}.logindi{background:#8CC43F;width:200px;height:150px;}</style>
Now in the onload event of the page I have called a javascript function to hide the second div.
<body onload="javascript:divcolp();">
<script language="javascript"> function divcolp() { $("#login").hide(); }</script>
Now in the onclick event of the div tag I am showing/hiding the div tag.
<script language="javascript"> function slideDiv() { $("#login").slideToggle(); }</script>
Hence, when the div is visible and if we click on first div, second div will hide and vice versa.