FastClick.attach(document.body);
$(".event-item").click(function(){
$(this).toggleClass("expanded");
});
<meta name="viewport" content="width=device-width, user-scalable=false;">
<div class="event-container">
<header>
<h1>Monday September 16</h1>
<p class="instructions">Click on an event to see more info.</p>
</header>
<ul>
<li class="event-item clearfix">
<div class="image">
<img src="http://placekitten.com/100/100">
</div>
<div class="event-body">
<h3 class="event-title">Event 1</h3>
<span class="event-time">11 am</span>
<section class="teaser">
<p> A short description. Maybe like two or three sentences. Just a teaser of what's inside. </p>
</section>
<section class="full-info">
<summary class="description">
<p> A longer description of the event. We can go wild here, a paragraph or two even. Lot's of information about the event can go here. </p>
<p> You should come to this event because it's going to be fun. So much fun. </p>
</summary>
<div class="location">
<strong>Liberty Science Center</strong>,
<div>222 Jersey City Blvd.</div>
<div>Jersey City</div>
<div>Visit <a href="#">http://example.com/</a> for more info</div>
</div>
</section>
</div>
</li>
<li class="event-item">
<div class="event-body">
<h3 class="event-title">Event 2</h3>
<span class="event-time">All Day</span>
<section class="teaser">
<p> A second event description. Also two or three sentences. Just a teaser of what's inside. </p>
</section>
<section class="full-info">
<summary class="description">
<p> A longer description of the event. We can go wild here, a paragraph or two even. Lot's of information about the event can go here. </p>
<p> You should come to this event because it's going to be fun. So much fun. </p>
</summary>
<div class="location">
<strong>Cricket Hill Brewery Co.</strong>,
<div>24 Kulick Rd.</div>
<div>Fairfield</div>
<span>Call 973-276-9415 or visit <a href="#"> www.CricketHillBrewery.com</a></span>
</div>
</section>
</div>
</li>
<li class="event-item">
<div class="image">
<img src="http://placekitten.com/g/64/64">
</div>
<div class="event-body">
<h3 class="event-title">Event 1</h3>
<span class="event-time">11 am</span>
<section class="teaser">
<p> A short description. Maybe like two or three sentences. Just a teaser of what's inside. </p>
</section>
<section class="full-info">
<summary class="description">
<p> A longer description of the event. We can go wild here, a paragraph or two even. Lot's of information about the event can go here. </p>
<p> You should come to this event because it's going to be fun. So much fun. </p>
</summary>
<div class="location">
<strong>Liberty Science Center</strong>,
<div>222 Jersey City Blvd.</div>
<div>Jersey City</div>
<div>Visit <a href="#">http://example.com/</a> for more info</div>
</div>
</section>
</div>
</li>
<li class="event-item">
<div class="event-body">
<h3 class="event-title">Event 2</h3>
<span class="event-time">All Day</span>
<section class="teaser">
<p> A second event description. Also two or three sentences. Just a teaser of what's inside. </p>
</section>
<section class="full-info">
<summary class="description">
<p> A longer description of the event. We can go wild here, a paragraph or two even. Lot's of information about the event can go here. </p>
<p> You should come to this event because it's going to be fun. So much fun. </p>
</summary>
<div class="location">
<strong>Cricket Hill Brewery Co.</strong>,
<div>24 Kulick Rd.</div>
<div>Fairfield</div>
<span>Call 973-276-9415 or visit <a href="#"> www.CricketHillBrewery.com</a></span>
</div>
</section>
</div>
</li>
<li class="event-item clearfix">
<div class="image">
<img src="http://placekitten.com/64/64">
</div>
<div class="event-body">
<h3 class="event-title">Event 1</h3>
<span class="event-time">11 am</span>
<section class="teaser">
<p> A short description. Maybe like two or three sentences. Just a teaser of what's inside. </p>
</section>
<section class="full-info">
<summary class="description">
<p> A longer description of the event. We can go wild here, a paragraph or two even. Lot's of information about the event can go here. </p>
<p> You should come to this event because it's going to be fun. So much fun.</p>
</summary>
<div class="location">
<strong>Liberty Science Center</strong>,
<div>222 Jersey City Blvd.</div>
<div>Jersey City</div>
<div>Visit <a href="#">http://example.com/</a> for more info</div>
</div>
</section>
</div>
</li>
</ul>
</div>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
overflow: scroll;
background-color: #ddd;
color: #333;
}
.event-container {
width: 75%;
max-width: 968px;
min-width: 300px;
margin: 0 auto;
}
.event-title {
display: inline-block;
line-height: 1;
margin: 0em;
}
header {
h1 {
font-size: 1.9em;
margin-bottom: 0.1em;
}
p {
margin: 0;
font-size: 0.9em;
}
}
ul {
list-style: none;
padding-left: 0;
}
.event-item {
overflow: hidden;
border-radius: 2px;
clear: both;
background-color: white;
box-shadow: 3px 3px black;
border: 1px solid black;
padding: 0.5em;
margin: 1em 0;
.image {
float: left;
margin-right: 1em;
img {
display: block;
}
}
.event-body {
overflow: hidden;
//min-height: 64px;
}
.location {
margin-top: 1em;
}
p {
margin-bottom: 0;
}
/*.description {
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: ease;
//transition: opacity 0.5s ease, height 1s;
}*/
&.expanded {
.teaser {
display: none;
/*
visibility: hidden;
height: 0;
margin: 0;
*/
}
.full-info {
display: block;
//opacity: 1;
}
}
&:not(.expanded) .full-info {
display: none;
/*height: 0;
visibility: hidden;
opacity: 0;*/
}
}
@media all and (max-width: 460px) {
header h1 {
font-size: 1.7em;
}
}
.clearfix{
*zoom:1;
}
.clearfix:before,.clearfix:after{
display:table;
content:" ";
//line-height:0;
}
.clearfix:after{
clear:both;
}