hedrix Lafter hedrix Lafter - 1 month ago 10
Javascript Question

<div> double expanding, issues with html and <div> building

Having some issues with a expanding elements. I have 2 buttons, one in the top right and one in the top left. each button expands a hidden area. My problem is when one area is expanded and then you expand the other area, it creates even more space in the . I'm not sure how to go about solving this. Here is a screenshot of the description above, and I will included necessary code. Thanks guys!



function main(){

$('.form-login').hide();
$('.form-register').hide();
$('.sub-elements').hide();

$('.main-elements').on('click',function(){
$(this).find('.sub-elements').slideToggle(300);
});

$('.login-button').on('click',function(){
$('.form-login').slideToggle(300);
});
$('.register-button').on('click',function(){
$('.form-register').slideToggle(300);
});


}
$(document).ready(main);

.form-login{
border-style: dashed;
border-color: green;
margin: 25px 1000px 0px 0px;
width: 15%;
color: whitesmoke;
font-family: 'sans-serif';
font-size: 14px;
}

.form-register{
border-style: dashed;
border-color: blue;
margin-left: 1110px;
width: 15%;
color: whitesmoke;
font-family: 'sans-serif';
border-style: dashed;
border-color: purple;
font-size: 14px;
margin-top: 10px;


}

.header {
font-size: 125px;
text-align:center;
width: auto;
border-style: dashed;
border-color: red;
}

<div class = "header">
<button class = "login-button">Login</button>
<button class = "register-button">Register</button>
<div class = "form-login">
<form>
Email<br>
<input type = "text" name = "email"><br>
Password<br>
<input type = "text" name = "password"><br>
</form>
</div>
<div class = "form-register">
<form>
First Name<br>
<input type = "text" name = "email"><br>
LastName<br>
<input type = "text" name = "password"><br>
Email Adress<br>
<input type = "text" name = "email"><br>
Password<br>
<input type = "text" name = "password"><br>
Re-Enter Password<br>
<input type = "text" name = "password"><br>
</form>
</div>
<img src = "images/iceland.png" alt = "Downtown" height="30%" width="55%"/>
</div>




Answer

Add the following code to the CSS.

.form-login, .form-register
{
    position:absolute;
}