JSFiddle - React, Tailwind, and code Playground

by minitech

HTML

<div id="imgs">

<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" />

</div>

CSS

#imgs {
    border:1px solid #000;
    border-radius:3px;
    height:20px;
    width:20px;
    overflow:hidden;
    -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
}

JavaScript

var imgs = document.getElementById("imgs");
var c = imgs.getElementsByTagName("*");
var children = [];
for(var i = 0; i < c.length; i++) children.push(c[i]);

function expandToFullHeight(evt) {
    evt.target.style.height = evt.target.scrollHeight.toString() + "px";
}

function retract(evt) {
    if(children.indexOf(evt.relatedTarget) === -1) evt.target.style.height = "";
}

if(imgs.addEventListener) {
    imgs.addEventListener("mouseover", expandToFullHeight, false);
    imgs.addEventListener("mouseout" , retract           , false);
    for(var i = 0; i < children.length; i++)
        children[i].addEventListener("mouseout", function(evt) { evt.stopPropagation(); }, false);
}