Hiding and showing div in Jquery

Question

I want to Hide a div On a button click. Here I am having 2 divs (Login and container). When the page loads, container will be hidden. And On click on a #submit button, I want to show the container div and hide the Login div.

The problem is Now login page is showing when the page loads, but After clicking the button I cannot make the div hide or show

Javascript:

<script> $('#submit').click(function() { console.log("Called2") $('#container').show(); $('#login').hide(); }); </script>

HTML:

<div id="login" > <div id="loginformcontainer"> <form> <label> Username: <input type="text" name="uname"> </label> <label> Password: <input type="password" name="pwd"> </label> <div class="buttons1"> <button type="button" id="submit" value="Login" class="btn"> Submit </button> <button type="reset" id="reset" value="Reset" class="btn"> Clear All </button> </div> <div> <div id="container" style="display: none;"> <p> Index Page</p> </div>

Um, you can't put a DIV inside a P.

Derek Henderson
– Derek Henderson

2013-06-21 10:24:07 +00:00
Commented Jun 21, 2013 at 10:24 — Derek Henderson
– Derek Henderson, Commented Jun 21, 2013 at 10:24

Rohan Kumar · Accepted Answer · 2013-06-21 10:25:20Z

Write your code in document.ready function so it work,

$(document).ready(function(){ $('#submit').click(function() { console.log("Called2") $('#container').show(); $('#login').hide(); }); });

or, its shorthand,

$(function(){ $('#submit').click(function() { console.log("Called2") $('#container').show(); $('#login').hide(); }); });

for changing its visibility every time you can use toggle() function like,

$(function(){ $('#submit').click(function() { console.log("Called2") $('#container, #login').toggle(); }); });

Cotainer div is not showing now. Login is perfectly hiding... Its showing empty string passed to getElementbyId Warning..
@Ash Check the last one in my updated answer (with toggle option).

Jai · Accepted Answer · 2013-06-21 10:30:48Z

See if this is the issue, you have not a closing </div> tag here:

 </div> <div> //<----------------here you can see an opening tag instead <div id="container" style="display: none;">

put a closing </div> above.

and try putting your script in doc ready:

 $(function(){ $('#submit').click(function() { console.log("Called2") $('#container').show(); $('#login').hide(); }); });

Derek Henderson · Accepted Answer · 2013-06-21 10:26:05Z

As it is a submit button handling the forms, submit event might be more useful. In this way you can validate and prevent from submitting.

Please check the jQuery docs for submit.

Derek Henderson · Accepted Answer · 2013-06-21 10:28:44Z

Look on the demo

$('#container').hide(); $('#submit').click(function() { console.log("Called2") $('#container').show(); $('#login').hide(); })

I believe that you not declare the <div id="container" ></div>

Write your script in document.ready inside the <script> function so it work...

Or you can't declare the library of Jquery.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Nesmar Patubo · Accepted Answer · 2013-06-21 10:42:47Z

Your html

 <div id="signIn" >Sign In</div> <div id="login" > <div id="loginformcontainer"> <form> <label> Username: <input type="text" name="uname"> </label> <label> Password: <input type="password" name="pwd"> </label> <div class="buttons1"> <button type="button" id="submit" value="Login" class="btn"> Submit </button> <button type="reset" id="reset" value="Reset" class="btn"> Clear All </button> </div> <div>

Your Jquery

 $('#login').hide(); $('#signIn').click(function() { alert("try"); }); $("#submit").click(function() { $('#login').fadeOut(); //do your code });

Upon page loads, the login div will hide and if you click the sign in then login div will just fade in. If the user clicks the submit button, before you hide the login div, make sure you will validate the user action. Refer to jquery documentation for further explanation.

majk86 · Accepted Answer · 2013-06-21 10:23:39Z

Isn't submit button causing postback and thus you're loosing css style set by javascript.

Collectives™ on Stack Overflow

Hiding and showing div in Jquery

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Related