JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div>
    <h3>Click this label!</h3>
    <p>This is some of the description that goes under the logo.  It's in a p tag, but we could probably change that if we wanted to.</p>
</div>

CSS

body {
    background: #444;
    font: 14px sans-serif;
    margin: 50px;
}
div {
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    overflow: hidden;
    width: 260px;
}
h3 {
    background: -webkit-linear-gradient(#eee, #ddd);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    color: #09e;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding: 6px 8px;
    position: relative;
    z-index: 1;
}
p {
    background: #fff;
    padding: 12px;
}

JavaScript

var $h3= $('h3'),
    $p = $('p'),
    h = $p.outerHeight();


$p.css({'marginTop' : (0 - h) + 'px'});

$h3.toggle(function () {
    $p.animate({
        'marginTop' : '0',
        'opacity' : '1'
    });
}, function () {
    $p.animate({
        'marginTop' : (0 - h) + 'px',
        'opacity' : '0'
    });
});