JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

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