JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="nav">Nav</div>
<div class="text">
    <p>This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations!</p>
</div>
<div>
    <p>This is some text that should get pushed down</p>
</div>

CSS

body {
    font-size: 10px;
    color: #333;
}
.nav {
    width: 50px;
    height: 30px;
    text-align: center;
    background: #ccc;
    border: 1px solid #333;
    line-height:3;
}
.text {
    display:none;
    margin:0;
    padding: 10px;
    width: 400px;
    height:100px;
    background: #e4e4e4;
}
.black {
    background-color:#000;
    color:#FFF;
}

JavaScript

$('.nav').click(function () {
    $('.text p').css({
        'width': $('.text').width()
    });
    $('.text').animate({
        'height': 'toggle'
    });
    $('.nav').toggleClass('black');
});