Yogesh - movie display

show/hide with slide movies sorted by either date or alphabetically

by Oliver Kelso

HTML

<div id="page-wrap">
<div>
    <div class="filtertitle">Festival Program 2013</div>
  </div>
        <div id="flavor-nav">
            <a rel="date" class="current">By Date</a> 
            <a rel="alpha">Alphabetical</a> 
        </div>
        
        <br />
        
        <div class="flavor date">

<!-- BY DATE START -->
<div class="mainfestmoviewrapper">
<div class="mainfestmoviebox">
<div class="mainfestmovieposter"><a href="http://2013.cinefranco.com/index.php/en/general-festival/item/47-esimesac-en"><img src="http://2013.cinefranco.com/media/k2/items/cache/542390225756f78888142d54f3d17e01_S.jpg" border="0" /></a></div>
<div class="mainfestmovietitle">ESIMESAC</div>
<div class="mainfestmoviedatetxt">Friday, April 5 - 7:00pm</div>
<div class="mainfestmoviepagelinks"><a href="http://2013.cinefranco.com/index.php/en/general-festival/item/47-esimesac-en">View...</a></div>
</div>
<div class="mainfestmoviebox">
<div class="mainfestmovieposter"><a href="http://2013.cinefranco.com/index.php/en/general-festival/item/49-cairo-en"><img src="http://2013.cinefranco.com/media/k2/items/cache/620466077c427f141effa294382f5fba_S.jpg" border="0" /></a></div>
<div class="mainfestmovietitle">CAIRO 678</div>
<div class="mainfestmoviedatetxt">Saturday, April 6 - 2:00pm</div>
<div class="mainfestmoviepagelinks"><a href="http://2013.cinefranco.com/index.php/en/general-festival/item/49-cairo-en">View...</a></div>
</div>
<div class="mainfestmoviebox">
<div class="mainfestmovieposter"><a href="http://2013.cinefranco.com/index.php/en/general-festival/item/51-sex-lies-surgery"><img src="http://2013.cinefranco.com/media/k2/items/cache/eb6c7c01c4e98e1f2578f9959463b973_S.jpg" border="0" /></a></div>
<div class="mainfestmovietitle">SEX, LIES AND SURGERY</div>
<div class="mainfestmoviedatetxt">Saturday, April 6 - 4:15pm</div>
<div class="mainfestmoviepagelinks"><a href="http://2013.cinefranco.com/index.php/en/general-festival/item/51-sex-lies-surgery">View...</a></div>
</div>
<div...

CSS

/* Movie page styles */
.mainfestmoviewrapper{
   float: left;
   left: 222px;
   width: 996px;
   margin-bottom: -15px;
   color: #555;
   font-family: Open Sans, sans-serif;
}
.mainfestmovieposter{
   text-align: center;
   padding-top: 10px;
}
.mainfestmoviedatetxt{
   padding-top: 10px;
   padding-left: 20px;
   font-size: 12px;
   text-align: left;
}
.mainfestmovietitle{
	padding-top: 20px;
	padding-left: 20px;
	font-size: 14px;
	text-align: left;
	font-weight: bold;
}
.mainfestmoviedate{
   padding-top: 10px;
   font-size: 16px;
   color:#C30;
   font-weight:900;
}
.mainfestmoviepagelinks{
   padding-left: 20px;
   padding-top: 10px;
   color:#C30;
}
.mainfestmoviebox{
   position: relative;
   float: left;
   left: -15px;
   width: 239px;
   height: 400px;
}
.filterbox{
	position: relative;
	float: left;
	left: 0px;
	width: 996px;
	margin-bottom: 10px;
	background-color: #eee;
	line-height: 3;
}
.filtertitle{
	text-align: center;
	font-weight: bolder;
	font-size: 24px;
	width: 300px;
    
	}
.filterselect{
	text-align: center;
	font-weight: bolder;
	font-size: 24px;
	width: 50px;
    
	}	


* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 12px Georgia; }

#page-wrap { width: 996px; margin: 20px auto; }

h1 { font: 30px Georgia; margin: 0 0 10px 0;  }

.flavor { margin: 0 0 15px 0; clear: both; overflow: hidden; }
.flavor img { float: left; margin: 0 15px 0 0; }
.flavor p { float: left; width: 460px; } 
#flavor-nav { margin: 0 0 15px 0; }
#flavor-nav a { padding: 2px 6px; border: 1px solid #A74C10; cursor:pointer;}
#flavor-nav a:hover, #flavor-nav a.current { background: #A74C10; color: white; }

JavaScript

$(document).ready(function() {

$(function() {
    
	var newSelection = "date";
    $(".flavor").not("."+newSelection).slideUp();
	$("."+newSelection).slideDown();    
    
	$("#flavor-nav a").click(function(){
	
	    $("#all-flavors").fadeTo(200, 0.10);
	
		$("#flavor-nav a").removeClass("current");
		$(this).addClass("current");
		
		newSelection = $(this).attr("rel");
		
		$(".flavor").not("."+newSelection).slideUp();
		$("."+newSelection).slideDown();
		
	    $("#all-flavors").fadeTo(600, 1);
		
	});
	
});
    
});