Skip to main content

este es el codigo jQuery

$('.toggle').click(function()){ $('.formulario').animate({jQuery

$('.toggle').click(function()){
    $('.formulario').animate({
    
    height: "toggle",
    'padding-top': 'toggle',
    'padding-bottom': 'toggle',
    opacity: 'toggle'
    }, "slow")
}

}

este es el codigo jQuery

$('.toggle').click(function()){ $('.formulario').animate({

height: "toggle",
'padding-top': 'toggle',
'padding-bottom': 'toggle',
opacity: 'toggle'
}, "slow")

}

este es el codigo jQuery

$('.toggle').click(function()){
    $('.formulario').animate({
    
    height: "toggle",
    'padding-top': 'toggle',
    'padding-bottom': 'toggle',
    opacity: 'toggle'
    }, "slow")
}
Origen Enlace

modificar archivo .css desde un archivo .js

quisera saber si se puede insertar esto

.contenedor-box .formulario:nth-child(3){ display: block; }

desde un archivo .js a uno .css o si puedo cambiar el numero 3 del nth-child(3)

lo que busco es hacer como una animación que cambie una especie de venta de inicio de sección a un formulario de registro al presionar Don't have an account?.

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

codigo HTML y CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}    

body{
    background: url(../img/fondo.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    font-family: sans-serif;
        
}
.contenedor-box{
    background: rgba(0,0,0,.9);
    width: 100%;
    max-width: 350px;
    margin: 200px auto;
    color: #fff;
    border-radius: 5px;
    
    
    
    }

.contenedor-box .avatar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 145px;
    left: calc(50% - 50px)
}
.contenedor-box .reset-password{
    top: 7px;
    right: 7px;
    width: 130px;
    height: 30px;
    font-size: 12px;
    line-height: 25px;
    text-align: left;
    transition: all .5s ease;
    cursor: pointer;
    margin-left:   20px
}
.contenedor-box .toggle{
    top: 7px;
    right: 7px;
    width: 130px;
    height: 30px;
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    transition: all .5s ease;
    cursor: pointer;
    margin-left:   20px
}

.contenedor-box .reset-password:hover{
    border-top: 2px solid #0095d9;
    border-bottom: 2px solid #0095d9;
}
.contenedor-box .toggle:hover{
    border-top: 2px solid #0095d9;
    border-bottom: 2px solid #0095d9;
}

.contenedor-box h1{
    margin: 30px 0 20px 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    
}

.contenedor-box label{
    margin: 0;
    padding: 0;
    font-weight: bold;
    display: block;
}

.contenedor-box input{
    width: 100%;
    margin-bottom: 20px;
}

.contenedor-box input[type="text"],
.contenedor-box input[type="email"],
.contenedor-box input[type="password"]{
    border: none;
    border-bottom: 2px solid #fff;
    background: transparent;
    outline: none;
    display: block;
    width: 100%;
    color: #fff;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 2px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}

.contenedor-box input[type="text"]:focus,
.contenedor-box input[type="email"]:focus,
.contenedor-box input[type="password"]:focus{
    border-bottom: 2px solid #0095d9;
}

.contenedor-box input[type="button"]{
    border: none;
    outline: none;
    height: 40px;
    background: #F0D331;
    color: #000;
    font-size: 20px;
    border-radius: 20px;
    font-weight: 900;
    cursor: pointer;
    transition: all .3s ease;
    margin: 0;
}

.contenedor-box input[type="button"]:hover{
    background: rgba(9,120,220,0.9);
}

.contenedor-box .formulario{
    padding: 30px;
    display: none;
}

.contenedor-box .formulario:nth-child(3){
    
    display: block;
}
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Artsem</title>
        <link rel="stylesheet" href="Login JS/css/diseño.css" id="diseño">
        <script language="javascript" type="text/javascript" src="Login JS/js/main.js"></script>
        
       
        
    </head>
    
    <body>
       
        <div class="contenedor-box">
            <img class="avatar" src="Login JS/img/logo.png" alt="Logo de JS">
          
            <div class="formulario">
                <h1>Login Here</h1>
                <form action="#">
                   <!--USERNAME--> 
                   <label for="username">Username</label>
                   <input type="text" name="username" id="username" placeholder="Enter Username" required>
                   <!--PASSWORD-->
                   <label for="password">Password</label>
                   <input type="password" name="password" id="password" placeholder="Enter Password" required>
                   <input type="button" name="login" id="login" onclick="validar()" value="Log In">
                   
                </form>   
            </div>
            
            
            
            <div class="formulario" id="formulario">
                <h1>Sign Up Here</h1>
                <form action="#">
                   <label for="username">Username</label>
                   <input type="text" name="username" id="reg_username" placeholder="Enter Username" required>
                   <label for="password">Password</label>
                   <input type="password" name="password" id="reg_password" placeholder="Enter Password" required>
                   <label for="email">E-mail</label>
                   <input type="email" name="email" id="email" placeholder="Enter E-mail" required>
                   <label for="telefono">Telefono</label>
                   <input type="text" name="telefono" id="telefono" placeholder="Enter Telefono" required>
                   <input type="button" name="sign_up" id="sign_up" onclick="validar()" value="Sign Up">
                   
                </form>   
            </div>
            
            <div class="reset-password">
                <span href="#">Lost your password?</span>
            </div>
            
            <div class="toggle" id="toggle">
                <span>Don't have an account?</span>
            </div>
        </div>
        
        
      

    </body>
</html>

el tutorial el que me baso usa jquery pero yo ocupo hacerlo con javascript puro.

este es el codigo jQuery

$('.toggle').click(function()){ $('.formulario').animate({

height: "toggle",
'padding-top': 'toggle',
'padding-bottom': 'toggle',
opacity: 'toggle'
}, "slow")

}