• HTML
• CSS
• JS

HTML

<h2>Haz click ahí para desplazar.</h2>
<div class="contenedor">
    <div class="icono" id="mostrar">
        <i class="icon-menu"></i>
    </div>
    <div class="cont">
        <h2>Información de Pedro Paulet</h2>
        <b>Fecha y lugar de nacimiento:</b><br> 2 de julio de 1874, Distrito de Tibaya, Arequipa, Perú
        
        <br><b>Fecha y lugar de fallecimiento:</b><br> 30 de enero de 1945, Buenos Aires, Argentina
        
        <br><b>Ocupación:</b><br> Ingeniero y pionero de la astronáutica
        
        <br><b>Conocido por:</b><br> Ser padre de la astronáutica
        
        <br><b>Nombre de Nacimiento:</b><br> Pedro Eleodoro Paulet Mostajo
        
        <br><b>Frase célebre:</b><br> "Todo niño puede llegar a ser un científico"
    </div>
</div>

CSS

body{
    margin:0px;
    font-family:arial;
}
.contenedor{
    width:250px;
    height:100vh;
    background:#212f3d;
    position:fixed;
    top:0;
    right:0;
    margin-right:-250px;
    display:inline-block;
    transition:0.3s all;
}
.contenedor.active{
    margin:0px;
}

.icono{
    width:50px;
    position:absolute;
    top:0px;
    left:-50px;
    background:#3498db;
    display:inline-block;
}
.icono i{
    font-size:35px;
    cursor:pointer;
    color:#154360;
}
.cont{
    color:#d6dbdf;
    padding:10px;
    text-align:center;
    border-left:2px solid #3498db;
}
.cont h2{
    margin:5px 0px;
    text-align:center;
}

JS

$(function(){
   $("#mostrar") .click(function(){
       
        var elem = $(".contenedor");
        var elem_icono= $(".contenedor .icono i");
        
       if(elem.hasClass("active")){
            elem.removeClass("active");
            elem_icono.attr("class","icon-menu");
       }else{
            elem.addClass("active");
            elem_icono.attr("class","icon-right-open-big");
            
       }
       
   });
});