JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head></head>
    <body>
        <div class="content">
            <p id="photo">photo</p>
            <p id="caption">caption</p>
        </div>
    </body>
</html>

CSS

body
{
    height:400px;
    border:1px solid black;
}

#photo
{
    border:1px solid gray;
}

JavaScript

$(document).ready(function() {
        $('#photo').width(0).height(0).css('opacity', 0);
        $('#caption').hide();
        $('body').toggle(
            function() {
                $('#photo').stop().show().animate({
                    width: '400px',
                    height: '300px',
                    opacity: 1
                }, 1000, function() {
                    $('#caption').stop().fadeIn(1000);
                }); //end animate
            }, 
            function() {
                $('#caption').stop().hide(function(){
                    $('#photo').stop().fadeOut();
                    $('#photo').width(0).height(0).css('opacity', 0);
                });
            }
        );
    });