Eu dei uma olhada ao redor, mas não consigo encontrar o que estou procurando.

Atualmente, tenho uma animação css na minha página, que é acionada por: hover. Gostaria que isso mudasse para 'clique' ou 'toque' quando a página for redimensionada além da largura de 700px usando consultas de mídia.

Aqui está o que eu tenho no momento:http://jsfiddle.net/danieljoseph/3p6Kz/

Como você pode ver, o: hover não funcionará em dispositivos móveis, mas ainda quero garantir que funcione da mesma maneira apenas com um clique, não com o mouse.

Prefiro usar css, se possível, mas também feliz com o JQuery.

Tenho a sensação de que isso é muito fácil de fazer, mas só estou perdendo algo muito óbvio! Qualquer ajuda seria apreciada.

Aqui está a animação css:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}