display:none + transitions

by Juan Muñoz

HTML

<div id='invalid' data-clm='1'>
  <span>Usuario y/o Password Incorrecto(s)><br>
  Intente Nuevamente</span>
  
</div>
<h1 class='btnSistema'>Hover me</h1>

CSS

html, body { height: 100%; padding:0; font: 20px/40px sans-serif; }
h1 { padding: 20px;  }
#invalid {
    width: 350px; background: pink; padding: 20px;
    height: 110px;
}

.show {
   height:auto;
}

JavaScript

$(document).ready(function (){
$('#invalid').slideUp();
  $('.btnSistema').click(function (){
  var v = $('#invalid').attr('data-clm');
  if ( v == 1 ){
    $('#invalid').slideDown();
    $('#invalid').attr('data-clm', 0 );
  }else{
    $('#invalid').slideUp();
    $('#invalid').attr('data-clm', 1 );
    console.log(v)
  }
  });
  
})