<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 ]">
<ul class="event-list">
<li>
<time datetime="2014-07-20">
<span class="day">4</span>
<span class="month">Jul</span>
<span class="year">2014</span>
<span class="time">ALL DAY</span>
</time>
<img alt="Independence Day" src="https://farm4.staticflickr.com/3100/2693171833_3545fb852c_q.jpg" />
<div class="info">
<h2 class="title">Independence Day</h2>
<p class="desc">United States Holiday</p>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><a href="#facebook"><span class="fa fa-facebook"></span></a></li>
<li class="twitter" style="width:34%;"><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
<li class="google-plus" style="width:33%;"><a href="#google-plus"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
</li>
<li class="event-details">
<div class="info" style="height:auto">
<p class="desc">Independence Day, commonly known as the Fourth of July, is a federal holiday in the United States commemorating the adoption of the Declaration of Independence on July 4, 1776, declaring independence from the Kingdom of Great Britain (now officially known as the United Kingdom). Independence Day is commonly associated with fireworks, parades, barbecues, carnivals, fairs, picnics, concerts, baseball games, family reunions, and political speeches and ceremonies, in addition to various other public and private events celebrating the history, government, and traditions of the United States. Independence Day is the National Day of the United States.</p>
</div>
</li>
<li>
<time datetime="2014-07-20 0000">
<span class="day">8</span>
<span class="month">Jul</span>
<span class="year">2014</span>
<span class="time">12:00 AM</span>
</time>
<div class="info">
<h2 class="title">One Piece Unlimited World Red</h2>
<p class="desc">PS Vita</p>
<ul>
<li style="width:50%;"><a href="#website"><span class="fa fa-globe"></span> Website</a></li>
<li style="width:50%;"><span class="fa fa-money"></span> $39.99</li>
</ul>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><a href="#facebook"><span class="fa fa-facebook"></span></a></li>
<li class="twitter" style="width:34%;"><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
<li class="google-plus" style="width:33%;"><a href="#google-plus"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
</li>
<li class="event-details disabled"></li>
<li>
<time datetime="2014-07-20 2000">
<span class="day">20</span>
<span class="month">Jan</span>
<span class="year">2014</span>
<span class="time">8:00 PM</span>
</time>
<img alt="My 24th Birthday!" src="https://farm5.staticflickr.com/4150/5045502202_1d867c8a41_q.jpg" />
<div class="info">
<h2 class="title">Mouse0270's 24th Birthday!</h2>
<p class="desc">Bar Hopping in Erie, Pa.</p>
<ul>
<li style="width:33%;">1 <span class="glyphicon glyphicon-ok"></span></li>
<li style="width:34%;">3 <span class="fa fa-question"></span></li>
<li style="width:33%;">103 <span class="fa fa-envelope"></span></li>
</ul>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><a href="#facebook"><span class="fa fa-facebook"></span></a></li>
<li class="twitter" style="width:34%;"><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
<li class="google-plus" style="width:33%;"><a href="#google-plus"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
</li>
<li class="event-details disabled"></li>
<li>
<time datetime="2014-07-31 1600">
<span class="day">31</span>
<span class="month">Jan</span>
<span class="year">2014</span>
<span class="time">4:00 PM</span>
</time>
<img alt="Disney Junior Live On Tour!" src="http://www.thechaifetzarena.com/images/main/DL13_PiratePrincess_thumb.jpg" />
<div class="info">
<h2 class="title">Disney Junior Live On Tour!</h2>
<p class="desc"> Pirate and Princess Adventure</p>
<ul>
<li style="width:33%;">$49.99 <span class="fa fa-male"></span></li>
<li style="width:34%;">$29.99 <span class="fa fa-child"></span></li>
</ul>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><a href="#facebook"><span class="fa fa-facebook"></span></a></li>
<li class="twitter" style="width:34%;"><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
<li class="google-plus" style="width:33%;"><a href="#google-plus"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
</li>
<li class="event-details">
<div class="info" style="height:auto">
<p class="desc">Disney Live is a touring stage show produced by Feld Entertainment under agreement with The Walt Disney Company. Aimed primarily at children, the shows feature performers dressed as Disney cartoon characters in performances that each derive their music and plot from elements collected from various Disney films and properties; the "stars" of the show are credited as the Disney characters themselves, performing their parts in mock cameos, while the performers themselves remain anonymous.
Disney Live currently runs five productions and touring companies at any given time. The shows have played all over the world, including non-traditional Disney markets such as South America, the Middle East, and Asia; as well as more traditional markets such as North America, Australia and Europe.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,400italic");
@import url("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");
body {
padding: 60px 0px;
background-color: rgb(220, 220, 220);
}
.event-list {
list-style: none;
font-family: 'Lato', sans-serif;
margin: 0px;
padding: 0px;
}
.event-list > li {
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 5px rgb(51, 51, 51);
box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
padding: 0px;
margin: 0px 0px 20px;
cursor:pointer;
}
.event-list > li > time {
display: inline-block;
width: 100%;
color: rgb(255, 255, 255);
background-color: rgb(197, 44, 102);
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.event-list > li:nth-child(even) > time {
background-color: rgb(165, 82, 167);
}
.event-list > li > time > span {
display: none;
}
.event-list > li > time > .day {
display: block;
font-size: 56pt;
font-weight: 100;
line-height: 1;
}
.event-list > li time > .month {
display: block;
font-size: 24pt;
font-weight: 900;
line-height: 1;
}
.event-list > li > img {
width: 100%;
}
.event-list > li > .info {
padding-top: 5px;
text-align: center;
}
.event-list > li > .info > .title {
font-size: 17pt;
font-weight: 700;
margin: 0px;
}
.event-list > li > .info > .desc {
font-size: 13pt;
font-weight: 300;
margin: 0px;
}
.event-list > li > .info > ul,
.event-list > li > .social > ul {
display: table;
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
width: 100%;
text-align: center;
}
.event-list > li > .social > ul {
margin: 0px;
}
.event-list > li > .info > ul > li,
.event-list > li > .social > ul > li {
display: table-cell;
cursor: pointer;
color: rgb(30, 30, 30);
font-size: 11pt;
font-weight: 300;
padding: 3px 0px;
}
.event-list > li > .info > ul > li > a {
display: block;
width: 100%;
color: rgb(30, 30, 30);
text-decoration: none;
}
.event-list > li > .social > ul > li {
padding: 0px;
}
.event-list > li > .social > ul > li > a {
padding: 3px 0px;
}
.event-list > li > .info > ul > li:hover,
.event-list > li > .social > ul > li:hover {
color: rgb(30, 30, 30);
background-color: rgb(200, 200, 200);
}
.facebook a,
.twitter a,
.google-plus a {
display: block;
width: 100%;
color: rgb(75, 110, 168) !important;
}
.twitter a {
color: rgb(79, 213, 248) !important;
}
.google-plus a {
color: rgb(221, 75, 57) !important;
}
.facebook:hover a {
color: rgb(255, 255, 255) !important;
background-color: rgb(75, 110, 168) !important;
}
.twitter:hover a {
color: rgb(255, 255, 255) !important;
background-color: rgb(79, 213, 248) !important;
}
.google-plus:hover a {
color: rgb(255, 255, 255) !important;
background-color: rgb(221, 75, 57) !important;
}
@media (min-width: 768px) {
.event-list > li {
position: relative;
display: block;
width: 100%;
height: 120px;
padding: 0px;
}
.event-list > li > time,
.event-list > li > img {
display: inline-block;
}
.event-list > li > time,
.event-list > li > img {
width: 120px;
float: left;
}
.event-list > li > .info {
background-color: rgb(245, 245, 245);
overflow: hidden;
}
.event-list > li > time,
.event-list > li > img {
width: 120px;
height: 120px;
padding: 0px;
margin: 0px;
}
.event-list > li > .info {
position: relative;
height: 120px;
text-align: left;
padding-right: 40px;
}
.event-list > li > .info > .title,
.event-list > li > .info > .desc {
padding: 0px 10px;
}
.event-list > li > .info > ul {
position: absolute;
left: 0px;
bottom: 0px;
}
.event-list > li > .social {
position: absolute;
top: 0px;
right: 0px;
display: block;
width: 40px;
}
.event-list > li > .social > ul {
border-left: 1px solid rgb(230, 230, 230);
}
.event-list > li > .social > ul > li {
display: block;
padding: 0px;
}
.event-list > li > .social > ul > li > a {
display: block;
width: 40px;
padding: 10px 0px 9px;
}
}
$(document).ready(function() {
$('.event-details').css('display','none');
$('.event-details').css('height','auto');
$('.event-details').css('margin-top','-17px');
$('.event-details > .info').css('height','auto');
$('.disabled').prev().css('cursor','default');
$('.event-list > li').click(function() {
if (!$(this).nextAll('.event-details').first().hasClass('disabled')) {
//$(this).nextAll('.event-details').first().height('auto');
$(this).nextAll('.event-details').first().nextAll('.info').first().height('auto');
$(this).nextAll('.event-details').first().slideToggle();
}
});
})
