Block Switcher - jQuery

by Yunus Gaziev

HTML

<div class="reg-login-forms">
    
    <ul class="reg-login-forms__controls">
        <li class="controls-item">
            <a class="login-button" href="#login">login</a>
        </li>
        <li class="controls-item">
            <a class="registration-button" href="#registration">registration</a>
        </li>
    </ul>
    
    <div class="login"></div>
    
    <div class="registration"></div>

</div>

CSS

html, body {
    background-color: #CCC;
}

.reg-login-forms {
    position: relative;
    width: 320px;
    margin: 24px auto;
    padding: 12px;
    background-color: MediumAquamarine;
    border: 1px solid SeaGreen;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.reg-login-forms__controls {
    margin: 0 0 12px 0;
    padding: 0;
    width: 100%;
    font-size: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.reg-login-forms__controls .controls-item {
    list-style-type: none;
    display: inline-block;
    width: 50%;
}

.controls-item a {
    display: block;
    width: 60%;
    margin: 0 auto;
    padding: 6px;
    
    font-size: 12px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.login, .registration {
    display: none;
    width: 100%;
    min-height: 260px;
    padding: 12px;
    
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.registration {
    height: 320px;
}

.login, .login-button {
    display: block;
    background-color: PaleGreen;
}

.registration, .registration-button {
    background-color: Aquamarine;
}

JavaScript

var fadeSpeed = 200;

var loginFormBtn = $('.login-button');
var registrationFormBtn = $('.registration-button');

var loginForm = $('.login');
var registrationForm = $('.registration');

$('.controls-item a').click(function(event) {
    event.preventDefault();
});


loginFormBtn.click(function() {
    showBlocks('login');
});

registrationFormBtn.click(function() {
    showBlocks('registration');
});

function showBlocks(targetBlock) {
    
    switch (targetBlock) {
        case 'login':
            registrationForm.fadeOut(fadeSpeed, function() {
                loginForm.fadeIn(fadeSpeed);
            });
            break;
            
        default:
            loginForm.fadeOut(fadeSpeed, function() {
                registrationForm.fadeIn(fadeSpeed);
            });

    }
    
}