 <p>I assume that the box opens right as from the link you provided. You can add another class for the box to open left (say boxleft)</p> <pre><code>$('.content_area div').hide(); initwidth = $('.boxleft').width(); initHeight = $('.boxleft').height(); $(function() { $('.boxleft').bind('mouseenter', function() { $(this).children('.more').show(); $('.boxleft').not(this).stop(true, true).fadeTo('normal', 0.2); $(this).stop(true, true).animate({ width: '70', height: '70', left: '-=50' }, { queue: true, duration: 'fast' }).css('font-size', '1.2em'); }); $('.boxleft').bind('mouseleave', function() { $(this).children('.more').hide(); $('.boxleft').not(this).stop(true, true).fadeTo('normal', 1); $(this).stop(true, true).animate({ width: initwidth, height: initHeight, left: '+=50' }, { queue: true, duration: 'slow' }).css('font-size', '1em'); }); </code></pre> <p>As you can see i added the extra line left: '-=50' and left: '+=50' in the animate function.</p>