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