title: Changing :hover to touch/click for mobile devices
body: <p>I've had a look around but can't quite find what i'm looking for.</p>
  
  <p>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.</p>
  
  <p>Here is what i have at the moment: <a href="http://jsfiddle.net/danieljoseph/3p6Kz/" rel="noreferrer">http://jsfiddle.net/danieljoseph/3p6Kz/</a></p>
  
  <p>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.</p>
  
  <p>I would rather use css if possible but happy with JQuery also.</p>
  
  <p>I have a feeling this is very easy to do but i am just missing something very obvious! Any help would be appreciated.</p>
  
  <p>Here is the css animation:</p>
  
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  </code></pre>