Asifuzzaman Redoy Asifuzzaman Redoy - 2 months ago 14
jQuery Question

jQuery code is not showing the form second time

Please Read The Question.
At first let me brief what problem i am facing. I have a form when I click registration button the form animates and also the close button becomes visible then i click close button the form hides and the registration button becomes visible again, but the problem is when I again click registration button the form doesn't appears again but the close button does.

Help needed In this matter. And also short format jQuery code for this purpose is also appreciable if anyone suggest.

I added my code fiddle below

<script>
$(document).ready(function () {
$('#close').hide();

$('#regbtn').click(function () {
$('#close').show();
$('#regbtn').hide(1000);

$('#firstCont').animate({
position:'absolute',
right: '40px',
top: '20%',
opacity: '1',
height: '800px',
width: '800px',
margin: '0 50px 0 100px'
});
});
$('#close').click(function(){
$('#firstCont').hide(1000);
$('#close').hide(1000);
$('#regbtn').show(1000);
});
});


</script>




$(document).ready(function () {
$('#close').hide();

$('#regbtn').click(function () {
$('#close').show();
$('#regbtn').hide(1000);

$('#firstCont').animate({
position:'absolute',
right: '40px',
top: '20%',
opacity: '1',
height: '800px',
width: '800px',
margin: '0 50px 0 100px'
});
});
$('#close').click(function(){
$('#firstCont').hide(1000);
$('#close').hide(1000);
$('#regbtn').show(1000);
});
});

.col-centered {
border:3px solid blue;
}
#primary {
padding:15px;
}
#firstCont {
height:0px;
width:0px;
overflow:hidden;
opacity:0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container" >
<div class="row">
<div class="text-center">
<button class="btn btn-success btn" id="regbtn">Click For Regestration</button>
</div>
</div>
<div class="row">
<div class="text-center">
<button class="btn btn-danger" id="close">Close</button>
</div>
</div>
</div>
<div class="container" >
<div class="row">
<div class="text-center" >

</div>
</div>
</div>

<div class="container-fluid" id="firstCont">
<div class="row centered-form center-block">

<div class="col-xs-6 col-centered">
<form id="primary">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" required id="email" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" required id="pwd" placeholder="Enter Email">
</div>

<div class="form-group" required>
<label for="gender">Gender:</label>
<select class="form-control" id="gender">
<option>--Select Gender--</option>
<option>Male</option>
<option>Female</option>
</select>
</div>

<div class="form-group">
<label for="phone">Phone:</label>
<input type="text" class="form-control" required id="phone" placeholder="Enter Phone">
</div>
<div class="form-group">
<label for="add">Address:</label>
<input type="text" class="form-control" required id="address" placeholder="Enter Address">
</div>
<div class="form-group">
<label for="country">Country:</label>
<select class="form-control" id="country">
<option>--Select Country--</option>
<option>Bangladesh</option>
<option>Chaina</option>
<option>Germany</option>
<option>India</option>
</select>
</div>

<div class="form-group" required>
<label for="city">City:</label>
<select class="form-control" id="city">
<option>--Select City--</option>
</select>
</div>

<div class="text-right">
<button class="btn-info btn" id="submit">SUBMIT</button>
</div>
</form>
</div>
</div>
</div>





ProblemFiddle

Answer

I have modified your fiddle here. Instead of hide() I've used animate({...}) to set the base style of the form.

Basically, when you hide your form, you should set it's style to the same as base one. Or, if you want to use hide(), you have to use show() instead of animate({...}).