 <p>Your problem is that you are creating a <code>local</code> variable in the first function and are referring to it in the second function which does not exist. if you make the <em>icon</em> variable <code>global</code>, everything will work fine.</p> <p>so your code may look like this:</p> <pre><code>var icon; $('li.social-list').hover( function(){ icon = $(this).html(); $(this).stop().animate({ width: "100px"}, 1000).text('Facebook'); }, function(){ $(this).stop().animate({ width: "50px"}, 1000).html(icon); } ); </code></pre> <p><strong>Update:</strong></p> <p>So here is the new code, which you should have two texts or one text and one image for each item and display one of them at a time:</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div id="social-slide"&gt; &lt;ul&gt; &lt;li class="social-list"&gt;&lt;a&gt;&lt;i class="fa fa-facebook fa-2x"&gt;&lt;span class="text1"&gt;1&lt;/span&gt;&lt;span class="text2" style="display:none;"&gt;facebook&lt;/span&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="social-list"&gt;&lt;a&gt;&lt;i class="fa fa-twitter fa-2x"&gt;&lt;span class="text1"&gt;2&lt;/span&gt;&lt;span class="text2" style="display:none;"&gt;twitter&lt;/span&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="social-list"&gt;&lt;a&gt;&lt;i class="fa fa-instagram fa-2x"&gt;&lt;span class="text1"&gt;3&lt;/span&gt;&lt;span class="text2" style="display:none;"&gt;linkedin&lt;/span&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="activate"&gt;&lt;a&gt;&lt;i class="fa fa-bars fa-2x"&gt;click&lt;/i&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><strong>JS:</strong></p> <pre><code>$('li.social-list').hover( function(){ $(this).stop().animate({ width: "100px"}, 1000); $(this).find(".text1").hide(); $(this).find(".text2").show(); }, function(){ $(this).stop().animate({ width: "50px"}, 1000); $(this).find(".text2").hide(); $(this).find(".text1").show(); } ); </code></pre> <p>I think you can get the idea from this sample code.</p> <p>Hope it helps you</p>