<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="container1">
<div class="row">
<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 ]">
<ul class="event-list">
<li>
<time datetime="2016-02-14">
<span class="day">14</span>
<span class="month">Feb</span>
<span class="year">2016</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">The GCBC</h2>
<p class="desc">Book of Revelation Conference begins with Dr. Charles Massegee.<br>5:00 p.m. Sunday and 7:00 p.m. Monday - Wednesday</p>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><a href="http://www.facebook.com/thegcbc"><span class="fa fa-facebook"></span></a></li>
<li class="twitter" style="width:34%;"><a href="http://www.twitter.com/thegcbc"><span class="fa fa-twitter"></span></a></li>
<li class="google-plus" style="width:33%;"><a href="https://www.youtube.com/channel/gcbcmedia"><span class="fa fa-youtube-play"></span></a></li>
</ul>
</div>
</li>
<li class="event-details">
<div class="info" style="height:auto">
<p class="desc">This internationally-known author and conference speaker will keep you on the edge of your seat as he brings Book of REVELATION alive! </p>
</div>
</li>
<li>
<time datetime="2016-02-14 0000">
<span class="day">20</span>
<span class="month">Feb</span>
<span class="year">2016</span>
<span class="time">7:00 PM</span>
</time>
<div class="info">
<h2 class="title">Greater Calvary Rites of Passage</h2>
<p class="desc">Youth Fundraiser</p>
<ul>
<li style="width:50%;"><a href="https://austinspurs.wufoo.com/forms/greater-calvary-rites-of-passage-inc/"><span class="fa fa-globe"></span> Website</a></li>
<li style="width:50%;"><span class="fa fa-money"></span> $8-$19</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="2016-02-14 2000">
<span class="day">27</span>
<span class="month">Feb</span>
<span class="year">2016</span>
<span class="time">All Day</span>
</time>
<!-- <img alt="My 24th Birthday!" src="https://farm5.staticflickr.com/4150/5045502202_1d867c8a41_q.jpg" /> -->
<div class="info">
<h2 class="title">Greater Calvary Rites of Passage, Inc.</h2>
<p class="desc">Cadet portfolio due for inspection and presentation.</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="2016-03-07 1600">
<span class="day">07</span>
<span class="month">Mar</span>
<span class="year">2016</span>
<span class="time">7: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">The GCBC</h2>
<p class="desc"> New Life Bible Study begins.</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 disabled"></li>
<!-- <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();
}
});
})
