The code you had would work fine, you just need to modify your HTML and CSS a little to make it more semantic. Try this:
<div class="state">
<span>CA</span>
<span class="state-full">LIFORNIA</span>
</div>
.state, .state-full { cursor: pointer; }
.state-full { display: none; }
.state span { float: left; }
$('.state').hover(function() {
$('.state-full', this).slideToggle(100, 'linear').display(100, 'linear');
});
Note that I added a context to the selector as I assume you're going to have more than one of these on the page.