Accordion

accordion.html

<ul id="accordion">
	<li class="new-homes">
    	<a href="#"><span>New Homes</span></a>
    </li>
    
    <li class="lifestyle">
    	<a href="#"><span>Lifestyle</span></a>
    </li>
    
    <li class="country-club last">
    	<a href="#"><span>Country Club</span></a>
    </li>
</ul>

accordion.js

$(document).ready(function(){
	var ogWidth = '208px';
	
	$("#accordion li").each(function(){
		var el = $(this);
		var ogLeft = el.css('left');
		
		function elOpen() {
			el.unbind('mousenter');
			
			$('#accordion  li').not(el).fadeOut(function(){
				el.stop().animate({
					width: '692px',
					left: '0px'
				});
			});
		}
		
		function elClose() {
			el.stop().animate({
				width: ogWidth,
				left: ogLeft
			}, function(){
				$('#accordion li').not(el).fadeIn();
				el.bind('mouseenter', elOpen);
			});
		}
		
		el.hover(elOpen, elClose);
	});
});

styles.css

#accordion a span { 
	display:block; position:absolute; margin:0; border:0 none; padding:0.5em 1.5em; bottom:30px; right:0; background-color:rgba(253,184,64,0.85); color:#FFF; font-weight:normal;
	text-transform:uppercase; letter-spacing:1px; font-family:'Lato', 'HelveticaNeueLT STD', 'Helvetica Neue', helvetica, arial, sans-serif;
}

#accordion 	  	{ width:704px; height:372px; margin:0 0 2em; position:relative; }
#accordion li	{ 
	width:208px; height:360px; border:6px solid #FFF; margin:0 22px 0 0; background-color:#FFF; position:absolute;
	-moz-box-shadow:0 0 8px #AAA; -webkit-box-shadow:0 0 8px #AAA; box-shadow:0 0 8px #AAA;
}
#accordion li.last { margin-right:0; width:208px; }
#accordion li span { right:-6px; }
#accordion a { position:absolute; top:0; left:0; width:100%; height:100%; }
#accordion a:hover { text-decoration:none; }

#accordion li.new-homes { background:url('../img/home_new-homes.jpg') center; left:0; }
#accordion li.lifestyle { background:url('../img/home_lifestyle.jpg') center; left:242px; }
#accordion li.country-club { background:url('../img/home_country-club.jpg') center; left:484px; }