JSFiddle - React, Tailwind, and code Playground

by will525

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
        <div class="span12">
            <div class="slide-footer__hidden">
                <p>hidden content</p>
            </div>            
        </div>
        <div class="span12">
            <div class="slide-footer">
                <ul class="slide-footer__menu">
                    <li>Help</li>
                    <li>Style Hints</li>
                    <li>About Us</li>
                </ul>
            </div>            
        </div>
    </div>    
</div>

CSS

.slide-footer__menu {
    list-style-type:none;
}
.slide-footer__menu li {
    float:left;
    padding:0 10px;
}

.slide-footer__hidden {
    background:#0099c5;
    color:#fff;
    display:none;
    height:200px;
    padding:5px;
    text-align:center;
    width:100%;
}

JavaScript

$('.slide-footer').click(function() {
    $('.slide-footer__hidden').slideToggle('slow');
});