Edit in JSFiddle

var botonAlternar = document.getElementById('alternar');

botonAlternar.onclick = function() {
    var panel = document.getElementById('panel');
    panel.classList.toggle('panel-invisible');
    
    var contenedor = document.getElementById('contenedor');
    contenedor.classList.toggle('contenedor-expandido');
    
    return false;
}

		
<div id='botones'>
    <a href='' id='alternar' class='boton'>alternar panel</a>
</div>
		
<div id='contenedor' class='contenedor'>Panel principal</div>
<div id='panel' class='panel'>Panel Alternativo</div>

body {
    overflow-x: hidden;
}
.panel {
    border: 1px solid #ff175e;
    position: absolute;
    top: 30px;
    bottom: 0;
    right: 0;
    width: 300px;
    text-align: center;
    vertical-align: center;
    
    -webkit-transition: right 0.25s ease-in-out;
}

.panel-invisible {
    right: -300px;
}

#botones {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: right;
    border: 1px solid gray;
    height: 27px;
}

.boton {
    border: 1px solid gray;
    margin: 5px;
    padding: 1px;
    display: inline-block;
    font-size: small;
}

.boton a {
    text-decoration: none;
}

.contenedor {
    margin-top: 30px;
    text-align: center;
    margin-right: 300px;
    border: 1px solid gray;
    padding-top: 3em;
    padding-bottom: 3em;
    -webkit-transition: margin-right 0.25s ease-in-out;
}

.contenedor-expandido {
    margin-right: 0;
}