jQuery Please help

Please help

hey i need help of all u guys.Actually the problem is that when i am loading this html page i just want the sign in page to appear and on click of cancel button i want a page to appear and on click of login button i get log in page..but the problem is that whenever i load my html page i get the sign in page and the page that is present on the cancel page..i tried showing and hiding and tried but i dnt know what more to do...please help me out..

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="styling.css"/> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> window.onload = function() { document.getElementById('first_div').style.display = 'none';} function toggle(link, div1id, div2id) { var div1 = document.getElementById(div1id); var div2 = document.getElementById(div2id); if (div1.style.display == 'none') { $('#third_div').hide(); div1.style.display = 'block'; div2.style.display = 'none'; link.innerHTML = 'Login'; } else { $('#third_div').hide(); div1.style.display = 'none'; div2.style.display = 'block'; link.innerHTML = 'signin'; } } function toggleImg(divId) { $('#first_div').hide(); $('#second_div').hide(); $('#third_div').show(); } </script> </head> <body> <div id="first_div" class="container"> <label for="username"> <span>Username:*</span> <input type="text" class="text" id="user" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label for="password"> <span>Password:*</span> <input type="password" class="text" id="pass" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label> <input type="checkbox" name="remember" id="remember" class="checkbox" value="1" tabindex="3" /> Remember Me? </label> <label> <input type="submit" name="submit" class="button1" id="doLogin" value="Sign in" /> </label> </div> <div id="second_div" class="container1"> <label for="username"> <span> Username:*</span> <input type="text" id="username" class="text" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label for="password"> <span>Password:*</span> <input type="password" id="password" class="text" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label for="repass"> <span>Re-Password:* </span><input type="password" id="repass" class="text" placeholder="Re-password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label for="email_id"> <span>Email-Id:</span><input type="text" id="email_id" class="text" placeholder="Verify email-id" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/> </label> <label><input type="submit" name="submit" class="button1" value="Submit" /></label> </div> <div id="third_div" class="image"> <img src="https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/tumblr_m2rdcqQLrA1qcb6kno1_500.jpg" /> </div> <div class="header"> <button class="button_cancel" onclick="toggleImg('third_div');">Cancel</button> <button class="button_sign" id="sign" onclick="toggle(this,'first_div', 'second_div'); return false;">Sign_in</button> </div> </body> </html>

I wanted it according to this website https://www.tumblr.com

It sounds like you are trying to make some type of modal-like dialog window appear on top of the page. If I were you I would look into using a jQuery plugin to do this. For example take a look at the jQuery UI modal dialog:

http://jqueryui.com/demos/dialog/

Looking at some of the source code on the sample pages may also give you an idea of how to structure your HTML and your JavaScript code better.

The problem is i have three divs one is for log in that is when i click login button log in form comes.
Other for sign in that is when i click signin button sign in form comes.
One is cancel div or the one i have taggged as third_div..the problem is that when im loading i shld only be able to see the div with image or div with sign in form but im able to see both together..so what am i supposed to do????????

crakcrack, can you please describe what you want in easy words like:

this button clicked --> this div appears, this div disappears etc.

i'm not that good in english