JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<div id="container">
<div id="box1">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus purus, congue a sagittis eget, tempor blandit orci. Sed posuere mi at dui rhoncus at sollicitudin dui varius. Nam vel elit eu lectus faucibus aliquet at sed nunc. Aenean non tellus non ligula porta rhoncus. Sed justo libero, tincidunt a bibendum eget, consequat at arcu. Donec semper turpis eget tellus bibendum sollicitudin. Donec non leo et lectus accumsan feugiat.
    </p>
</div>
<div id="box2">
</div>
<span class="btn">change size</span>

CSS

#container { 
    width:500px;
}

#box1 {
    height:100px;
    background-color:#aaa;
    border:1px solid #333;
    overflow:auto;
}

#box1 p {
     color:#000;
}

#box2 {
    height:300px;
    background-color:#bbb;
    border:1px solid #333;
    border-top:0;
    overflow:auto;
}

.btn {
    text-decoration:underline;
    cursor:pointer;
    color:blue;
}

.btn:hover {
    color:red;
}

JavaScript

var spd = 300;

$('#box2').html(
    "<img width='"+$('#box2').innerWidth()+"' "+ "src='http://bengrosser.com/share/tst/broken.jpg' />"
    );

$('.btn').click(function() {
    var curheight = $('#box1').height();
    if(curheight == 30) {
        $('#box1').animate({height:'100'},spd);
        $('#box2').animate({height:'300'},spd);
        $('#box1').find('p').animate({color:'#000'});
    } else {
        $('#box1').animate({height:'30'},spd);
        $('#box2').animate({height:'370'},spd);
        console.log($('#box1').find('p'));
        $('#box1').find('p').animate({color:'#888'});
    }
});