• HTML
• CSS
• JS

HTML

<h2>Haz click en botón para mostrar contenido oculto.</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;
}
h2{
    margin-left:10px;
}
.contenedor{
    width:100%;
    height:300px;
    position:fixed;
    bottom:0px;
    left:0px;
    margin-bottom:-300px;
    transition:0.3s all;
    background:#212f3d;
}
.contenedor.active{
    margin:0px;
}

.icono{
    width:50px;
    position:absolute;
    top:-40px;
    right:0px;
    background:#3498db;
}
.icono i{
    font-size:35px;
    cursor:pointer;
    color:#154360;
}
.cont{
    color:#d6dbdf;
    padding:10px;
    text-align:center;
    border-top: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-down-open-big");
            
       }
       
   });
});