switch

by surfine

HTML

<div class="xtoggle_main">
    <div id="si_x11" class="xbcktoggle"><label class="xval10">SIGNUP</label></div>
    <div id="si_x12" class="xbcktoggle"><label class="xval10">LOGIN</label></div>
    <div id="xtoggle" class="xtoggle"></div>
    <div id="xxtoggle"></div>
</div>

CSS

.xtoggle_main {
    height: 38px;
    width: 120px;
    border: 1px solid #c2c2c2;
    border-radius: 7px;
    background-color: #FFF;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    top: 100px; left: 100px;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgb(255,255,255);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

.xbcktoggle {
    height: 100%; width: 50%;
    position: relative;
    text-align: center;
    vertical-align: middle;
    line-height: 38px;
}

.xbcktoggle, .xval10:hover {
    cursor: pointer;
}

.xval10 {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

#si_x11 {
    top: 0px; left: 0px;
}

#si_x12 {
    top: -100%; left: 50%;
}

.xtoggle {
    height: 42px; width: 50%;
    background-color: #FFF;
    border: 1px solid #c2c2c2;
    position: relative;
    top: -79px; left: -1px;
    
    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
    background-image: -moz-linear-gradient(top, #f0f0f0, #e6e6e6);
    background-image: -ms-linear-gradient(top, #f0f0f0, #e6e6e6);
    background-image: -o-linear-gradient(top, #f0f0f0, #e6e6e6);
    background-image: linear-gradient(top, #f0f0f0, #e6e6e6);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 0 white inset, 0 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 0 white inset, 0 1px 1px rgba(0, 0, 0, 0.25);
    -webkit-transition: left 0.1s linear;
    -moz-transition: left 0.1s linear;
    -ms-transition: left 0.1s linear;
    -o-transition: left 0.1s linear;
    transition: left 0.1s linear;
}

.xtoggle::before,
.xtoggle::after {
  content: '';
  display: block;
  height: 32px;
  width: 5px;
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -10px;
  border: 1px solid #cccccc;
  border-width: 0 1px;
 ...

JavaScript

$(document).ready(function() {
    $('#si_x11').click(function() {
        $('#xtoggle').css({left: '-1px'});
        $('#xxtoggle').delay(100).show(0)
        $('#wlcm_bubble').show();
        $('#wlcm_bubble2').show();
        $('#wlcm_bubble3').hide();
    });
    $('#si_x12').click(function() {
        $('#xxtoggle').hide();
        $('#xtoggle').css({left: '59px'});
        $('#wlcm_bubble').hide();
        $('#wlcm_bubble2').hide();
        $('#wlcm_bubble3').show();
    });
    $('#xtoggle').click(function() {
        $('#xtoggle').css({left: '-1px'});
        $('#xxtoggle').delay(100).show(0)
        $('#wlcm_bubble').show();
        $('#wlcm_bubble2').show();
        $('#wlcm_bubble3').hide();
    });
    $('#xxtoggle').click(function() {
        $(this).hide();
        $('#xtoggle').css({left: '59px'});
        $('#wlcm_bubble').hide();
        $('#wlcm_bubble2').hide();
        $('#wlcm_bubble3').show();
    });
});