JSFiddle - React, Tailwind, and code Playground

by Jacob Quant

HTML

<button id="button">Show/Hide</button>
<div id="container" class="content">
    <div id="photo" class="">(Photo here)</div>
    <div id="caption" class="">(Caption here)</div>
</div>

CSS

div.container {
    background-color: #eee;
    }
div#photo {
    display: none;
    background-color: #ccc;
    }
div#caption {
    display: none;
    background-color: #ff0;
    }

JavaScript

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