title: jQuery hide text, display on hover?
body: <p>Hopefully just a quick question :)</p>
  
  <p>I'm trying to write little jQuery that will help do this:</p>
  
  <ul>
  <li>text displayed on page: CA</li>
  <li>text displayed when mouse hovers: CALIFORNIA</li>
  </ul>
  
  <p>I've managed to do this the wrong way round unfortunately, I know I need to use the .hide() function but I just can't figure out how to use it. Sorry I'm pretty new to jQuery and just trying to get my head round it.</p>
  
  <p>Here's a jfiddle I made <a href="http://jsfiddle.net/liamtarpey/UttAa/" rel="noreferrer">link</a>, preferably the text would slide in from the right. I've tried using a span but it seemed to work better having p tags in different divs. I understand that I'll need to put the HTML all on one line to get rid of the little space between CA and LIFORNIA. could anyone possibly please assist?</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="state"&gt;
       &lt;p&gt;CA&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="state-full"&gt;
       &lt;p&gt;LIFORNIA&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.state, .state-full {
       display: inline-block;
       cursor: pointer;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('.state').hover(function() {
       $('.state-full').slideToggle(100, 'linear');
       $('.state-full').display(100, 'linear');
  });
  </code></pre>
  
  <p>Many thanks!</p>