• HTML
• CSS
• JS

HTML

<div class="container">
    <div class="message" id="msg">
        PONGA UN CONTENIDO AQUÍ...<br>
        Arraste el botón 'Touch'
        <div class="touch">Touch ▼</div>
    </div>
</div>

CSS

body{
    font-family:sans-serif;
}
*{
    box-sizing:border-box;
    margin:0rem;
    padding:0rem;
}
.container{
    position:relative;
}
.message{
    width:100%;
    position:absolute;
    left:0;
    top:-125px;
    padding:1rem;
    text-align:center;
    background:#f2f3f4;
    border:7px solid #17202a;
    border-radius:0.3rem 0.3rem 0rem 0rem;
    min-height:8rem;
    transition:0.3 all;
}
.message.open{
    top:0;
}
.touch{
    position:absolute;
    left:50%;
    bottom:-3.5rem;
    transform:translateX(-50%);

    padding:1rem;
    background:#17202a;
    color:white;
    border-radius:0rem 0rem 1rem 1rem;
    cursor:pointer;
}

JS

var msg = document.getElementById('msg');
var body = document.body;

// Hammer.js Swipe
var Ham = new Hammer.Manager(body);

var Swipe = new Hammer.Swipe();

Ham.add(Swipe);

Ham.on('swipeup', function () {
  toggleMsg('up');
});

Ham.on('swipedown', function () {
  toggleMsg('down');
});

// Toggle Msg
function toggleMsg(action){
  if (action == 'up') 
  {
    msg.classList.remove('open');
  }
  else if (action == 'down')
  {
    msg.classList.add('open');
  }
}