JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div>
    <h1>Click Me</h1>
    <p>Thank you.</p>
</div>

CSS

div {
    background-color: green;
    color: white;
    font-family: monospace;
    
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

h1 {
    cursor: pointer;
    font-size: 18px;
    padding: 20px;
}

p {
    padding: 20px;
}

JavaScript

var $div = $( 'div' ),
    $h1 = $div.find( 'h1' ),
    $p = $div.find( 'p' );

$p.hide();
    
$h1.on( 'click', function() {
    $p.slideDown( 'slow', function() {
        // This is a callback function. It only fires once slideDown is finished.    
        $div.css( 'background-color', 'purple' );        
    });
});