DevShahidul/Show description bellow the content (featured gallery) box.js

## Show description bellow the content (featured gallery) box.js
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		@import "compass/css3";

		@import url(http://weloveiconfonts.com/api/?family=entypo);

		/* entypo */
		[class*="entypo-"]:before {
		  font-family: 'entypo', sans-serif;
		}

		@mixin bp($point) {
		  @if $point == mid {
		    @media (max-width: 728px) { @content; }
		  }
		}


		/*Variables*/
		$orange: rgb(242,125,0);
		$grey: rgb(135,135,133);
		$facebook: #3b5998;
		$twitter: #00acee;

		* {
		  -moz-box-sizing: border-box;
		  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
		  font-family: Helvetica, Arial, sans-serif;
		}

		body {
		  background: #333;
		  font-family: Helvetica, Arial, sans-serif;
		  font-size: 14px;
		  color: #212121;
		  text-align: left;
		  padding: 20px;
		  display: block;
		  max-width:1000px;
		  position: relative;
		 }

		p {
		  margin: 1em 0;
		}

		/* Top City Filter */
		.filters {
		  margin: 24px;
		  a {
		    padding-right:15px;
		    color: $grey;
		    &:hover, &.active-filter {
		      color:#fff;
		      }
		  }
		}


		/* Boxes */

		a {
		  color: $orange;
		  text-decoration: none;
		}

		article {
		  display: inline;
		  float: left;
		  width: 300px;
		  margin: 0 10px 20px;
		  a {
		      display: block;
		      padding: 0 20px 10px;
		      background: #fff;
		      overflow: hidden;
		      color: $orange;
		      text-decoration: none;
		      &:hover img {
		        -webkit-transition: all 0.5s ease;
		        -moz-transition: all 0.5s ease;
		        -ms-transition: all 0.5s ease;
		        transition: all 0.5s ease;
		        opacity: 0.8;
		      }
		    }

		  img {
		    width: 300px;
		    height: auto;
		    margin: 0 -20px 20px;
		  }

		  i {
		    font-style: normal;
		    text-transform: uppercase;
		    font-weight: bold;
		    font-size: 11px;
		    display: block;
		    margin: 0 0 5px;
		  }

		    b {
		    font-weight: normal;
		    font-size: 20px;
		    color: #121212;
		    padding-bottom: 10px;
		  }

		  &.current {
		    margin-bottom: 0;
		    border-bottom: 20px solid #fff;
		  }

		  div {
		    display: none;
		  }
		}

		.content {
		  clear: both;
		  background: #fff;
		  padding: 0 20px;
		  margin: 0 10px 0;
		  position: relative;
		  max-height: 0;
		  opacity: 0;
		  overflow: hidden;
		  -webkit-transition: all 0.5s ease;
		  -moz-transition: all 0.5s ease;
		  -ms-transition: all 0.5s ease;
		  transition: all 0.5s ease;

		  &.open {
		    max-height: 1000px;
		    padding: 20px;
		    margin: 0 10px 20px;
		    opacity: 1;
		  }


		   a {
		      float: right;
		      font-size: 13px;
		      line-height: 17px;
		      }

		      i {
		        font-style: normal;
		        text-transform: uppercase;
		        font-weight: bold;
		        font-size: 11px;
		        color: $orange;
		      }

		      img, video {
		        display: block;
		        width: 100%;
		        height: auto;
		        margin: 0 0 20px;
		      }

		       b {
		        font-weight: normal;
		        font-size: 30px;
		        color: #121212;
		        margin: 18px 0;
		         display: block;
		      }
		}

		.details {
		  width:100%;
		  .bio {
		    width:61.8%;
		    float: left;
		    padding-right: 20px;
		    @include bp(mid) {
		     width: 100%;
		    }
		  }
		  .social {
		    width: 38.2%;
		    @include bp(mid) {
		     width: 100%;
		    }
		    float: left;
		    margin: 1em 0;
		    b {
		        margin: 0;
		        font-size: 20px;
		        line-height: 20px;
		      }
		    ul {
		      list-style: none;
		      margin: 0;
		      padding: 15px 0 0;
		      li {
		        display: block;
		        text-align: left;
		        border-bottom: 1px solid #fff;
		        a {
		          position: relative;
		          background: #efefef;
		          float: none;
		          text-align: left;
		          display: block;
		          padding: 10px 0 10px 70px;
		          font-size: 0.8em;
		          text-transform: uppercase;

		          &.facebook {
		            border-left: 5px solid $facebook;
		            &:before {color:$facebook;}
		          }
		          &.twitter {
		            border-left: 5px solid $twitter;
		            &:before {color:$twitter;}
		          }
		          &.web {
		            border-left: 5px solid $orange;
		          }
		          -webkit-transition:all 0.2s linear;
		      		-moz-transition:all 0.2s linear;
		      		-o-transition:all 0.2s linear;
		      		transition:all 0.2s linear;
		          &:hover {
		            background: #ccc;
		            color: #686868;
		          }
		          &:before {
		            position: absolute;
		            left: 25px;
		            font-size: 1.5em;
		          }
		        }
		      }
		    }
		    }
		}

		.content p {
		  font-size: 13px;
		  line-height: 17px;
		}

		.bigbox {
		  width:100%;
		  padding:20px;
		  overflow:hidden;
		}
	</style>
</head>
<body>

<div class="bigBox">
	<div class="filters">
		<a href="#" class="active-filter" data-filter="all">ALL</a>
		<a href="#" data-filter="sydney">SYDNEY</a>
		<a href="#" data-filter="melbourne">MELBOURNE</a>
	</div>
	<div class="container">
		<article class="sydney">
			<a href="#" data-cat="news" data-state="vic">
				<img src="http://lorempixel.com/800/500/people/1/">
			<i>3rd July, 2013</i><b>Marion Grasby</b></a>
			<div>
				<a href="www.marionskitchen.com.au
				" target="_blank">marionskitchen.com.au</a>
				<i>3rd July, 2012</i>
				<b>Marion Grasby</b>
				<div class="details">
					<div class="bio">
						<p>Marion Grasby started life in the tropical city of Darwin, where the papaya salads are spicy and the mangoes are sweet and sticky. Marion is a little bit Thai (courtesy of her Mum) and a little bit Australian (courtesy of her Dad). Her love of food and travel became ingrained at an early age as her globetrotting parents lived and travelled in Papua New Guinea, Thailand and Australia.</p>
						<p>Marion is a passionate cook, writer, presenter and creator of the Marion's Kitchen Asian food range. Her cookbook, Marion: Recipes and Stories from a Hungry Cook, was released in 2011 and she has a monthly food column in Masterchef Magazine.</p>
					</div>
					<div class="social">
						<b>Connect:</b>
						<ul>
							<li>
								<a class="facebook entypo-facebook" href="#">Facebook</a>
							</li>
							<li>
								<a class="twitter entypo-twitter" href="#">@marionskitchen</a>
							</li>
							<li>
								<a class="web entypo-link" href="#">marionskitchen.com.au</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</article>
		<article class="sydney melbourne">
			<a href="#" data-cat="columns" data-state="nat"><img src="http://lorempixel.com/800/500/people/2/"><i>3rd, 10th & 11th July, 2013</i><b>Justin North</b></a>
			<div>
				<a href="https://www.JustinNorth.com.au" target="_blank">JustinNorth.com.au</a>
				<i>3rd, 10th & 11th July, 2013</i>
				<b>Justin North</b>
				<div class="details">
					<div class="bio">
						<p>Restaurateur Justin North is one of Sydney's most widely recognised chefs - his philosophical approach to sustainability and ethical eating has seen him be described as a visionary within the industry. The contemporary flavours and sophisticated style of his food has resulted in many awards: Becasse was named runner-up for the 2009 Sydney Morning Herald Restaurant of the year award while Justin was awarded the title of '2009 Chef of the Year'. In 2011 Becasse received two hats in the 2012 SMH Good Food Guide, three stars from Gourmet Traveller and was the 2011 Restaurant and Catering Restaurant of the year. Also, in 2011 Justin and Georgia were presented with the inaugural Le Cordon Bleu Award for Professional Excellence at the Sydney Morning Herald Good Food Guide Award Ceremony.</p>
						<p>Justin is the author of two award winning books Becasse: Inspirations and Flavours and the recently published French Lessons.</p>
					</div>
					<div class="social">
						<b>Connect:</b>
						<ul>
							<li>
								<a class="facebook entypo-facebook" href="#">Facebook</a>
							</li>
							<li>
								<a class="twitter entypo-twitter" href="#">@JustinNorth</a>
							</li>
							<li>
								<a class="web entypo-link" href="#">becasse.com.au</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</article>
		<article class="melbourne">
			<a href="#" data-cat="features" data-state="vic"><img src="http://lorempixel.com/800/500/people/3/"><i>19th & 22nd July (Dinner), 2013</i><b>Dani Venn</b></a>
			<div>
				<a href="http://www.danivenn.com" target="_blank">danivenn.com
				</a>
				<i>19th & 22nd July (Dinner), 2013</i>
				<b>Dani Venn</b>
				<div class="details">
					<div class="bio">
						<p>MasterChef audience favourite Dani Venn made a big splash on our screens in 2011. The MasterChef judges and audience alike were impressed with her knowledge of Asian flavours, skill in the kitchen and her enthusiastic and relentless energy. Dani always wore her heart on her plate and was always happy, whether laughing or crying. "Dani has such an infectious personality. Her laugh lit up the MasterChef kitchen"- Matt Preston. Since leaving the competition, Dani has been developing her food blog www.danivenn.com, and expanding her career aspirations and media opportunities. She performs cooking demonstrations all over Australia and makes regular appearances on the Nova 100 Breakfast show in Melbourne with Kate Langbroek and Dave Hughes. Dani also has television and book projects in development.</p>
					</div>
					<div class="social">
						<b>Connect:</b>
						<ul>
							<li>
								<a class="facebook entypo-facebook" href="#">Facebook</a>
							</li>
							<li>
								<a class="twitter entypo-twitter" href="#">@DaniVenn</a>
							</li>
							<li>
								<a class="web entypo-link" href="#">danivenn.com</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</article>
		<article class="sydney melbourne">
			<a href="#" data-cat="news" data-state="nat"><img src="http://lorempixel.com/800/500/people/4/"><i>5th July, 2013</i><b>Julie Goodwin</b></a>
			<div>
				<a href="https://www.juliegoodwin.com.au" target="_blank">juliegoodwin.com.au
				</a>
				<i>5th July, 2013</i>
				<b>Julie Goodwin</b>
				<div class="details">
					<div class="bio">
						<p>Julie Goodwin is the winner of the first Australian Masterchef crown. In 2009 Network Ten's Masterchef Series took Australian television by storm. In a finale watched by almost 4 million Australians, Julie Goodwin took out the title of Australia's first ever 'MasterChef and the life of the dedicated wife and mother of 3 changed forever.</p>
						<p>Julie's first book 'Our Family Table' published with Random House in 2010, stayed at No.1 Bestseller for over 10 weeks, having sold over 200,000 copies to date, it is one of Australia's largest selling cook books ever. Julie's second book, 'Heart of the Home', was released for Christmas 2011, with a third book due for release in 2013.</p>
						<p>Julie has maintained a high media profile as a regular columnist for the Australian's Women's Weekly and resident cook on the Today Show for Ch9. and an audience favourite guest on Ten's Can Of Worms.</p>
					</div>
					<div class="social">
						<b>Connect:</b>
						<ul>
							<li>
								<a class="facebook entypo-facebook" href="#">Facebook</a>
							</li>
							<li>
								<a class="twitter entypo-twitter" href="#">@JulieGoodwin</a>
							</li>
							<li>
								<a class="web entypo-link" href="#">juliegoodwin.com.au</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</article>
		<article class="sydney">
			<a href="#" data-cat="features" data-state="nat"><img src="http://lorempixel.com/800/500/people/5/"><i>6th, 18th & 21st July, 2013</i><b>Justine Schofield</b></a>
			<div>
				<a href="https://www.justineschofield.com.au" target="_blank">justineschofield.com.au</a>
				<i>6th, 18th & 21st July, 2013</i>
				<b>Justine Schofield</b>
				<div class="details">
					<div class="bio">
						<p>A favourite finalist on MasterChef Series 1, Justine is a down to earth, half French and half Australian gourmet cook. Growing up with her mother owning a French restaurant, Justine Schofield is naturally passionate about French cuisine. Often referred to as a young 'Rachel Rae', Justine now hosts her own TV show, 'Everyday Gourment' on Ch10, has appeared at Good Food Shows nationally, and is in high demand catering and appearing at corporate events.</p>
					</div>
					<div class="social">
						<b>Connect:</b>
						<ul>
							<li>
								<a class="facebook entypo-facebook" href="#">Facebook</a>
							</li>
							<li>
								<a class="twitter entypo-twitter" href="#">@JustineSchofield</a>
							</li>
							<li>
								<a class="web entypo-link" href="#">justineschofield.com.au</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</article>
		<article class="sydney">
			<a href="#" data-cat="features" data-state="nat"><img src="http://lorempixel.com/800/500/people/6/"><i>12th & 13th July, 2013</i><b>Colin Fassnidge</b></a>
			<div>
				<a href="https://fourinhand.com.au" target="_blank">fourinhand.com.au</a>
				<i>12th & 13th July, 2013</i>
				<b>Colin Fassnidge</b>
				<div class="details">
					<div class="bio">
						<p>Dublin born Colin Fassnidge has been the Head Chef of the Four in Hand since October 2005. During Colin's time at the Four in Hand, The Dining Room has been exalted through reviews. Awards include the Good Food Guide One Chefs Hat and adding the prestigious Second Hat in 2010. The Dining Room has always been in The Gourmet Travellers Top 100. Colin is also behind the Paddington Arms and 4Fourteen in Surry Hills. Colin was a popular contributing Chef on the Masterchef Series - introducing Australian's to the culinary delights of pig's tail and winning out against Contestant Jay Huxley in a great Steak & Kidney Pie Challenge.</p>
					</div>
					<div class="social">
						<b>Connect:</b>
						<ul>
							<li>
								<a class="facebook entypo-facebook" href="#">Facebook</a>
							</li>
							<li>
								<a class="twitter entypo-twitter" href="#">@ColinFassnidge</a>
							</li>
							<li>
								<a class="web entypo-link" href="#">fourinhand.com.au</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</article>
		<div class="content"></div>
	</div>
</div> <!--end Big box -->

<script type="text/javascript">
	(function($){
		// Define Functions

		function contentDiv() {
		    $('.added').remove();
		    $('article').removeClass('current');
		    var docWidth = +$('.container').width();
		    var articleWidth = +$('article').width();
		    articleWidth = articleWidth + 20;
		    var ratio = docWidth / articleWidth;
		    ratio = Math.floor(ratio);
		    if(ratio == 0) {
		      ratio = 1;
		    }
		    ratio = ratio + 'n';
		    $('article.show:nth-of-type(' + ratio + ')').after('<div class="content added"></div>');
		}


		$('article').addClass('show');
		contentDiv();


		// RESIZE -
		$(window).resize(function() {
		    contentDiv();
		  });


		var articles = $('article');

		$('.filters a').click(function(e){
		  $('.filters a').removeClass('active-filter');
		  $(this).addClass('active-filter');
		  e.preventDefault();
		  var filter = $(this).data('filter');
		  $('.container').empty();
		  if( filter == "all") {
		    $('.container').hide().html(articles).fadeIn(1000).append('<div class="content"></div>');
		  } else {
		    filter = '.'+filter;
		    filter_articles = $(articles).filter(filter);
		    $('.container').hide().html(filter_articles).fadeIn(1000).append('<div class="content"></div>');
		  }

		  contentDiv();

		  });


		// ARTICLE CLICK
		$('.container').on('click', 'article',function(e){
		  e.preventDefault();
		  content = $(this).find('div').html();
		  box = $(this).nextAll('.content').first();
		  if($(this).hasClass('current')) {

		     $(this).removeClass('current');
		     $(box).removeClass('open').empty();
		     $(this).parent().find('.content').empty();

		  } else {

		    $('article').removeClass('current');
		    $(this).addClass('current');
		    $(this).parent().find('.content').empty();
		    $('.open').removeClass('open').empty();
		    $(box).addClass('open').html(content);

		  }

		 });
	})(jQuery);

</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
	@import "compass/css3";

	@import url(http://weloveiconfonts.com/api/?family=entypo);

	/* entypo */
	[class*="entypo-"]:before {
	font-family: 'entypo', sans-serif;
	}

	@mixin bp($point) {
	@if $point == mid {
	@media (max-width: 728px) { @content; }
	}
	}


	/Variables/
	$orange: rgb(242,125,0);
	$grey: rgb(135,135,133);
	$facebook: #3b5998;
	$twitter: #00acee;

	* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: Helvetica, Arial, sans-serif;
	}

	body {
	background: #333;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #212121;
	text-align: left;
	padding: 20px;
	display: block;
	max-width:1000px;
	position: relative;
	}

	p {
	margin: 1em 0;
	}

	/* Top City Filter */
	.filters {
	margin: 24px;
	a {
	padding-right:15px;
	color: $grey;
	&:hover, &.active-filter {
	color:#fff;
	}
	}
	}


	/* Boxes */

	a {
	color: $orange;
	text-decoration: none;
	}

	article {
	display: inline;
	float: left;
	width: 300px;
	margin: 0 10px 20px;
	a {
	display: block;
	padding: 0 20px 10px;
	background: #fff;
	overflow: hidden;
	color: $orange;
	text-decoration: none;
	&:hover img {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity: 0.8;
	}
	}

	img {
	width: 300px;
	height: auto;
	margin: 0 -20px 20px;
	}

	i {
	font-style: normal;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px;
	display: block;
	margin: 0 0 5px;
	}

	b {
	font-weight: normal;
	font-size: 20px;
	color: #121212;
	padding-bottom: 10px;
	}

	&.current {
	margin-bottom: 0;
	border-bottom: 20px solid #fff;
	}

	div {
	display: none;
	}
	}

	.content {
	clear: both;
	background: #fff;
	padding: 0 20px;
	margin: 0 10px 0;
	position: relative;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;

	&.open {
	max-height: 1000px;
	padding: 20px;
	margin: 0 10px 20px;
	opacity: 1;
	}


	a {
	float: right;
	font-size: 13px;
	line-height: 17px;
	}

	i {
	font-style: normal;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px;
	color: $orange;
	}

	img, video {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 20px;
	}

	b {
	font-weight: normal;
	font-size: 30px;
	color: #121212;
	margin: 18px 0;
	display: block;
	}
	}

	.details {
	width:100%;
	.bio {
	width:61.8%;
	float: left;
	padding-right: 20px;
	@include bp(mid) {
	width: 100%;
	}
	}
	.social {
	width: 38.2%;
	@include bp(mid) {
	width: 100%;
	}
	float: left;
	margin: 1em 0;
	b {
	margin: 0;
	font-size: 20px;
	line-height: 20px;
	}
	ul {
	list-style: none;
	margin: 0;
	padding: 15px 0 0;
	li {
	display: block;
	text-align: left;
	border-bottom: 1px solid #fff;
	a {
	position: relative;
	background: #efefef;
	float: none;
	text-align: left;
	display: block;
	padding: 10px 0 10px 70px;
	font-size: 0.8em;
	text-transform: uppercase;

	&.facebook {
	border-left: 5px solid $facebook;
	&:before {color:$facebook;}
	}
	&.twitter {
	border-left: 5px solid $twitter;
	&:before {color:$twitter;}
	}
	&.web {
	border-left: 5px solid $orange;
	}
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;
	&:hover {
	background: #ccc;
	color: #686868;
	}
	&:before {
	position: absolute;
	left: 25px;
	font-size: 1.5em;
	}
	}
	}
	}
	}
	}

	.content p {
	font-size: 13px;
	line-height: 17px;
	}

	.bigbox {
	width:100%;
	padding:20px;
	overflow:hidden;
	}
	</style>
	</head>
	<body>

	<div class="bigBox">
	<div class="filters">
	<a href="#" class="active-filter" data-filter="all">ALL</a>
	<a href="#" data-filter="sydney">SYDNEY</a>
	<a href="#" data-filter="melbourne">MELBOURNE</a>
	</div>
	<div class="container">
	<article class="sydney">
	<a href="#" data-cat="news" data-state="vic">
	<img src="http://lorempixel.com/800/500/people/1/">
	<i>3rd July, 2013</i><b>Marion Grasby</b></a>
	<div>
	<a href="www.marionskitchen.com.au
	" target="_blank">marionskitchen.com.au</a>
	<i>3rd July, 2012</i>
	<b>Marion Grasby</b>
	<div class="details">
	<div class="bio">
	<p>Marion Grasby started life in the tropical city of Darwin, where the papaya salads are spicy and the mangoes are sweet and sticky. Marion is a little bit Thai (courtesy of her Mum) and a little bit Australian (courtesy of her Dad). Her love of food and travel became ingrained at an early age as her globetrotting parents lived and travelled in Papua New Guinea, Thailand and Australia.</p>
	<p>Marion is a passionate cook, writer, presenter and creator of the Marion's Kitchen Asian food range. Her cookbook, Marion: Recipes and Stories from a Hungry Cook, was released in 2011 and she has a monthly food column in Masterchef Magazine.</p>
	</div>
	<div class="social">
	<b>Connect:</b>
	<ul>
	<li>
	<a class="facebook entypo-facebook" href="#">Facebook</a>
	</li>
	<li>
	<a class="twitter entypo-twitter" href="#">@marionskitchen</a>
	</li>
	<li>
	<a class="web entypo-link" href="#">marionskitchen.com.au</a>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</article>
	<article class="sydney melbourne">
	<a href="#" data-cat="columns" data-state="nat"><img src="http://lorempixel.com/800/500/people/2/"><i>3rd, 10th & 11th July, 2013</i><b>Justin North</b></a>
	<div>
	<a href="https://www.JustinNorth.com.au" target="_blank">JustinNorth.com.au</a>
	<i>3rd, 10th & 11th July, 2013</i>
	<b>Justin North</b>
	<div class="details">
	<div class="bio">
	<p>Restaurateur Justin North is one of Sydney's most widely recognised chefs - his philosophical approach to sustainability and ethical eating has seen him be described as a visionary within the industry. The contemporary flavours and sophisticated style of his food has resulted in many awards: Becasse was named runner-up for the 2009 Sydney Morning Herald Restaurant of the year award while Justin was awarded the title of '2009 Chef of the Year'. In 2011 Becasse received two hats in the 2012 SMH Good Food Guide, three stars from Gourmet Traveller and was the 2011 Restaurant and Catering Restaurant of the year. Also, in 2011 Justin and Georgia were presented with the inaugural Le Cordon Bleu Award for Professional Excellence at the Sydney Morning Herald Good Food Guide Award Ceremony.</p>
	<p>Justin is the author of two award winning books Becasse: Inspirations and Flavours and the recently published French Lessons.</p>
	</div>
	<div class="social">
	<b>Connect:</b>
	<ul>
	<li>
	<a class="facebook entypo-facebook" href="#">Facebook</a>
	</li>
	<li>
	<a class="twitter entypo-twitter" href="#">@JustinNorth</a>
	</li>
	<li>
	<a class="web entypo-link" href="#">becasse.com.au</a>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</article>
	<article class="melbourne">
	<a href="#" data-cat="features" data-state="vic"><img src="http://lorempixel.com/800/500/people/3/"><i>19th & 22nd July (Dinner), 2013</i><b>Dani Venn</b></a>
	<div>
	<a href="http://www.danivenn.com" target="_blank">danivenn.com
	</a>
	<i>19th & 22nd July (Dinner), 2013</i>
	<b>Dani Venn</b>
	<div class="details">
	<div class="bio">
	<p>MasterChef audience favourite Dani Venn made a big splash on our screens in 2011. The MasterChef judges and audience alike were impressed with her knowledge of Asian flavours, skill in the kitchen and her enthusiastic and relentless energy. Dani always wore her heart on her plate and was always happy, whether laughing or crying. "Dani has such an infectious personality. Her laugh lit up the MasterChef kitchen"- Matt Preston. Since leaving the competition, Dani has been developing her food blog www.danivenn.com, and expanding her career aspirations and media opportunities. She performs cooking demonstrations all over Australia and makes regular appearances on the Nova 100 Breakfast show in Melbourne with Kate Langbroek and Dave Hughes. Dani also has television and book projects in development.</p>
	</div>
	<div class="social">
	<b>Connect:</b>
	<ul>
	<li>
	<a class="facebook entypo-facebook" href="#">Facebook</a>
	</li>
	<li>
	<a class="twitter entypo-twitter" href="#">@DaniVenn</a>
	</li>
	<li>
	<a class="web entypo-link" href="#">danivenn.com</a>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</article>
	<article class="sydney melbourne">
	<a href="#" data-cat="news" data-state="nat"><img src="http://lorempixel.com/800/500/people/4/"><i>5th July, 2013</i><b>Julie Goodwin</b></a>
	<div>
	<a href="https://www.juliegoodwin.com.au" target="_blank">juliegoodwin.com.au
	</a>
	<i>5th July, 2013</i>
	<b>Julie Goodwin</b>
	<div class="details">
	<div class="bio">
	<p>Julie Goodwin is the winner of the first Australian Masterchef crown. In 2009 Network Ten's Masterchef Series took Australian television by storm. In a finale watched by almost 4 million Australians, Julie Goodwin took out the title of Australia's first ever 'MasterChef and the life of the dedicated wife and mother of 3 changed forever.</p>
	<p>Julie's first book 'Our Family Table' published with Random House in 2010, stayed at No.1 Bestseller for over 10 weeks, having sold over 200,000 copies to date, it is one of Australia's largest selling cook books ever. Julie's second book, 'Heart of the Home', was released for Christmas 2011, with a third book due for release in 2013.</p>
	<p>Julie has maintained a high media profile as a regular columnist for the Australian's Women's Weekly and resident cook on the Today Show for Ch9. and an audience favourite guest on Ten's Can Of Worms.</p>
	</div>
	<div class="social">
	<b>Connect:</b>
	<ul>
	<li>
	<a class="facebook entypo-facebook" href="#">Facebook</a>
	</li>
	<li>
	<a class="twitter entypo-twitter" href="#">@JulieGoodwin</a>
	</li>
	<li>
	<a class="web entypo-link" href="#">juliegoodwin.com.au</a>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</article>
	<article class="sydney">
	<a href="#" data-cat="features" data-state="nat"><img src="http://lorempixel.com/800/500/people/5/"><i>6th, 18th & 21st July, 2013</i><b>Justine Schofield</b></a>
	<div>
	<a href="https://www.justineschofield.com.au" target="_blank">justineschofield.com.au</a>
	<i>6th, 18th & 21st July, 2013</i>
	<b>Justine Schofield</b>
	<div class="details">
	<div class="bio">
	<p>A favourite finalist on MasterChef Series 1, Justine is a down to earth, half French and half Australian gourmet cook. Growing up with her mother owning a French restaurant, Justine Schofield is naturally passionate about French cuisine. Often referred to as a young 'Rachel Rae', Justine now hosts her own TV show, 'Everyday Gourment' on Ch10, has appeared at Good Food Shows nationally, and is in high demand catering and appearing at corporate events.</p>
	</div>
	<div class="social">
	<b>Connect:</b>
	<ul>
	<li>
	<a class="facebook entypo-facebook" href="#">Facebook</a>
	</li>
	<li>
	<a class="twitter entypo-twitter" href="#">@JustineSchofield</a>
	</li>
	<li>
	<a class="web entypo-link" href="#">justineschofield.com.au</a>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</article>
	<article class="sydney">
	<a href="#" data-cat="features" data-state="nat"><img src="http://lorempixel.com/800/500/people/6/"><i>12th & 13th July, 2013</i><b>Colin Fassnidge</b></a>
	<div>
	<a href="https://fourinhand.com.au" target="_blank">fourinhand.com.au</a>
	<i>12th & 13th July, 2013</i>
	<b>Colin Fassnidge</b>
	<div class="details">
	<div class="bio">
	<p>Dublin born Colin Fassnidge has been the Head Chef of the Four in Hand since October 2005. During Colin's time at the Four in Hand, The Dining Room has been exalted through reviews. Awards include the Good Food Guide One Chefs Hat and adding the prestigious Second Hat in 2010. The Dining Room has always been in The Gourmet Travellers Top 100. Colin is also behind the Paddington Arms and 4Fourteen in Surry Hills. Colin was a popular contributing Chef on the Masterchef Series - introducing Australian's to the culinary delights of pig's tail and winning out against Contestant Jay Huxley in a great Steak & Kidney Pie Challenge.</p>
	</div>
	<div class="social">
	<b>Connect:</b>
	<ul>
	<li>
	<a class="facebook entypo-facebook" href="#">Facebook</a>
	</li>
	<li>
	<a class="twitter entypo-twitter" href="#">@ColinFassnidge</a>
	</li>
	<li>
	<a class="web entypo-link" href="#">fourinhand.com.au</a>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</article>
	<div class="content"></div>
	</div>
	</div> <!--end Big box -->

	<script type="text/javascript">
	(function($){
	// Define Functions

	function contentDiv() {
	$('.added').remove();
	$('article').removeClass('current');
	var docWidth = +$('.container').width();
	var articleWidth = +$('article').width();
	articleWidth = articleWidth + 20;
	var ratio = docWidth / articleWidth;
	ratio = Math.floor(ratio);
	if(ratio == 0) {
	ratio = 1;
	}
	ratio = ratio + 'n';
	$('article.show:nth-of-type(' + ratio + ')').after('<div class="content added"></div>');
	}


	$('article').addClass('show');
	contentDiv();


	// RESIZE -
	$(window).resize(function() {
	contentDiv();
	});



	var articles = $('article');

	$('.filters a').click(function(e){
	$('.filters a').removeClass('active-filter');
	$(this).addClass('active-filter');
	e.preventDefault();
	var filter = $(this).data('filter');
	$('.container').empty();
	if( filter == "all") {
	$('.container').hide().html(articles).fadeIn(1000).append('<div class="content"></div>');
	} else {
	filter = '.'+filter;
	filter_articles = $(articles).filter(filter);
	$('.container').hide().html(filter_articles).fadeIn(1000).append('<div class="content"></div>');
	}

	contentDiv();

	});


	// ARTICLE CLICK
	$('.container').on('click', 'article',function(e){
	e.preventDefault();
	content = $(this).find('div').html();
	box = $(this).nextAll('.content').first();
	if($(this).hasClass('current')) {

	$(this).removeClass('current');
	$(box).removeClass('open').empty();
	$(this).parent().find('.content').empty();

	} else {

	$('article').removeClass('current');
	$(this).addClass('current');
	$(this).parent().find('.content').empty();
	$('.open').removeClass('open').empty();
	$(box).addClass('open').html(content);

	}

	});
	})(jQuery);

	</script>

	</body>
	</html>