JSFiddle - React, Tailwind, and code Playground

by criptkiller

HTML

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic&v2' rel='stylesheet' type='text/css'>

<div id='wrap'>

    <div class='title'>
    <h1>TRISPEAK</h1>
    </div>
   
    <div class='content'>
        <p>wefawveververv evevefv efve fvefv efvefv efv fvefve fvfv dfvdfv dfv dfvds fv sdfvsd fvsdfvsd fvsdfv dsfv</p>
    </div>
    
    <div class='title'>
    <h1>TRISPEAK</h1>
    </div>
   
    <div class='content'>
        <p>wefawveververv evevefv efve fvefv efvefv efv fvefve fvfv dfvdfv dfv dfvds fv sdfvsd fvsdfvsd fvsdfv dsfv</p>
    </div>
    
    <div class='title'>
    <h1>TRISPEAK</h1>
    </div>
   
    <div class='content'>
        <p>wefawveververv evevefv efve fvefv efvefv efv fvefve fvfv dfvdfv dfv dfvds fv sdfvsd fvsdfvsd fvsdfv dsfv</p>
    </div>
    
</div>

CSS

h1 { font-size:2em; /* 32px */ margin-bottom:24px; font-family: 'Josefin-Sans', sans-serif; font-style: italic; font-weight: 400; height: auto; width: 300px; line-height: 23px; }

p {font-size: 14px;}


#wrap {
    width: 300px; height:500px; background-color: #ebebeb;
}

.title {
     background-color: #434343; width: 200px; height: 23px; padding: 0; margin: 0; overflow: hidden; color: white; margin-bottom: 5px;
}

.title:hover {cursor: pointer; }

.content {width: 200px; height: auto; padding: 0 0 5px 0;}

JavaScript

$(document).ready(function() {
    //http://jsfiddle.net/jordanbvidrine/A4hPn/
    $('.content').hide();
    
    $('.title').click(function() {
        $(this).next().animate(
            {'height':'toggle'}, 0800, 'swing' );
    });
    
});