Dynamic Multiple Events Page

by omni5cience

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
<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>
             ...

SCSS

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;
}

JavaScript

FastClick.attach(document.body);
$(".event-item").click(function(){
    $(this).toggleClass("expanded");
});