JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<div class="container detail-hidden">
    <div class="summary">
        Kitten
    </div>
    <div class="detail">
        <img src="http://placekitten.com/200/300">            
    </div>
</div>
<div class="container detail-hidden">
    <div class="summary">
        Kitten
    </div>
    <div class="detail">
        <img src="http://placekitten.com/200/300">            
    </div>
</div>  
<div class="container detail-hidden">
    <div class="summary">
        Kitten
    </div>
    <div class="detail">
        <img src="http://placekitten.com/200/300">            
    </div>
</div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    min-height: 500px;
}

.container {
    position: relative;
    width: 400px;
    min-height: 20px;
    border: 1px dotted blue;
    overflow: visible;
}

.container.detail-hidden {
    overflow: hidden;
}

.summary,
.detail {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: 1px dotted red;
    width: 400px;
}

.detail {
    opacity: 0;
}

.hidden {
    display: none;
}

JavaScript

// Does not work reliably across browsers w/ jQuery 1.4.4
// Does work w/ jQuery 1.7.2

(function($) {
    function handleClick(e) {
        var container = $(this).parent('.container')[0];
        
        $(container).toggleClass('detail-hidden');

        $('.container').each(function(index, element) {
            var el = $(element);
            
            if (el[0] !== container) {
                el.addClass('detail-hidden');
            }
            
            el.trigger('toggle', [el, containers[index]]);             
        });
        
        e.preventDefault();
    }
    
    function resizeContainer(container, dimensions) {
        if (container.hasClass('detail-hidden')) {
            container.height(dimensions.summary);
            container.find('.summary').css({ opacity: 1 });
            container.find('.detail').css({ opacity: 0 });
        } else {
            container.height(dimensions.detail);
            container.find('.summary').css({ opacity: 0 });
            container.find('.detail').css({ opacity: 1 });
        }           
    }
    
    function handleResize(e, container, dimensions) {
        var toHeight;
        
        if (container.hasClass('detail-hidden')) {
            toHeight= dimensions.summary;
            
            container.animate({
                height: toHeight
            }, 400);
            
            container.find('.summary').fadeIn();
            container.find('.detail').fadeOut();
        } else {
            toHeight = dimensions.detail;
            
            container.animate({
                height: toHeight 
            }, 400, function() {
                container.height(toHeight);               
            });

            container.find('.summary').fadeOut();
            // we need to do this for some bizarre reason
            container.find('.detail').css({ opacity: 1 });
            container.find('.detail').fadeIn();
            
            
        }        
    }
    
   ...