css - Changing :hover to touch/click for mobile devices

Question

I've had a look around but can't quite find what i'm looking for.

I currently have a css animation on my page which is triggered by :hover. I would like this to change to 'click' or 'touch' when the page is resized past width 700px using media queries.

Here is what i have at the moment: http://jsfiddle.net/danieljoseph/3p6Kz/

As you can see, the :hover will not work on mobile devices but i still want to ensure it works the same way just by click, not hover.

I would rather use css if possible but happy with JQuery also.

I have a feeling this is very easy to do but i am just missing something very obvious! Any help would be appreciated.

Here is the css animation:

.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;
}

Answer 1

If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.

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

You'd have to test the FIDDLE in a mobile environment. I can't at the moment.
correction - I just tested in a mobile, it works fine