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;
    visibility: hidden;
}

.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

YUI().use('node', 'event-custom', 'event-base', 'node-event-delegate', 'anim', 'transition', function(Y) {
    'use strict';
    
    // TODO: need to be careful of other clicks
    function handleClick(e) {
        var container = this.get('parentNode');
        
        //console.log(e.target);
        
        container.toggleClass('detail-hidden');

        Y.all('.container').each(function(el, index) {
            if (el !== container) {
                el.addClass('detail-hidden');
            }

            Y.fire('toggle', { node: el });             
        });
        
        e.preventDefault();
    }
    
    function handleResize(e) {
        var container = e.node,
            summary = container.one('.summary'),
            detail = container.one('.detail'),
            toHeight = container.hasClass('detail-hidden') ? summary.getData('height') : detail.getData('height'),
            anim = new Y.Anim({
                node: container,
                to: {
                    height: toHeight   
                }
            });
        
        anim.run();
        
        if (container.hasClass('detail-hidden')) {
            summary.show(true);
            detail.hide(true);
        } else {
            summary.hide(true);
            detail.show(true);
        }        
    }
    
    function init(container, dimensions) {
        var summary = container.one('.summary'),
            detail = container.one('.detail'),
            toHeight = summary.getData('height');
        
        summary .setStyle('opacity', 1);
        detail.setStyle('opacity', 0);

        container.addClass('detail-hidden');

        container.setStyles({
            'visibility': 'visible',
            'overflow': 'hidden',
            'height': toHeight
        });
    }
    
    Y.all('.container').each(function(el, index) {
        var container = el,
            summary = container.one('.summary'),
            detail = container.one('.detail');
        
       ...