li height transform

by CoolBlue

HTML

<div class="container collaspableList">Hover to reveal, Click to toggle pin
    <ul class="procedure" pinned="closed">
        <li class="report">
            <span class="timestamp">11:46:01:377</span>
            <span class="caller">caller</span>
            <span class="context">START</span>
            <span class="message">message</span>
            <span class="dt">time</span>
        </li>
    </ul>
</div>
<div class="container collaspableList" style='margin-top: 50px'>div collaspableList
    <ul class="procedure" pinned="open">ul open procedure
        <li class="report">li report
            <span class="timestamp">span timestamp</span>
            <span class="message">span message</span>
            <span class="dt">span dt</span>        </li>
    </ul>
</div>

CSS

.container {
	width: 80%;
	outline: 4px solid yellow;
	outline-offset: 2px;
	position: relative;
	-moz-perspective: 2000px;
	-ms-perspective: 2000px;
	-webkit-perspective: 2000px;
	perspective: 2000px;
}
ul:hover{
	cursor: default;
}
.dt{
	float: right;
}

.procedure{
	outline: 2px solid red;
	list-style: none;
	padding-left: 2em;
}
.container > .procedure{
	padding-left: 6.5em;
}
.procedure li{
	outline: 2px solid green;
	outline-offset: -2px;
	margin: 0;
	list-style: none;
	display: list-item;
	padding-top: 0; padding-bottom: 0;
}
.procedure span{
	background-color:rgba(171, 171, 171,0.5);
	position: relative;
	display: inline-block;
	line-height: normal;
	margin: 0;
	padding-top: 0; padding-bottom: 0;
}
.procedure .timestamp{
	position: absolute;
	left: 0;
}
.procedure .timestamp{
	position: absolute;
	left: 0;
}
.report .context{
	padding-left: 2em;
}
ul.procedure[pinned='closed'] > li {
    max-height: 0;
	transition: max-height 0.5s ease-in;
}
ul.procedure[pinned='closed'] > li span {
    /*ul.procedure[pinned='closed'] > li.report  {*/
    opacity: 0.3;
    filter: opacity(30%);
    
    max-height: 0;
	transition: max-height 0.5s ease-in;
}
ul.procedure[pinned='open'] > li span {

    max-height: 200px;
	transition: max-height 0.5s ease-in;
}
ul.procedure li:hover{
	/*adjust line spacing comensurate with span rotate X*/        	    background-color:aqua;
    
    max-height: 200px;
	transition: max-height 0.5s ease-in;

}
ul.procedure li:hover span{
	background-color:aqua;
    
    max-height: 200px;
	transition: max-height 0.5s ease-in;
}

JavaScript

(function () {
    window.addEventListener('load', initCollabsableList, false)

    function initCollabsableList() {
        className = 'collaspableList';
        domain = document;

        //private members
        var collabsableLists = domain.getElementsByClassName(className),
            list;
        alert(collabsableLists.length);
        // Set event listeners and bind DOM elements and callback closure
        for (var i = 0, list = collabsableLists[i];
                i < collabsableLists.length; list = collabsableLists[++i]) {
            list.addEventListener('click', eventHandler, false);

        } //for

        //callback closure
        function eventHandler(e) {
            var listEvent = {
                e: e,
                click: function c(p) {
                    toggleDisplay(p)
                },
                qualifiedTarget: function qT() {
                    // Return the target element if it qualifies
                    // The element must be a '.report, .report > '
                    // If not then exit null.
                    // Otherwise return this.
                    var t = this.e.target;
                    if (classSelect(t, 'report') ||
                        classSelect(t.parentNode, 'report')) {
                        return this
                    } else {
                        return null
                    }
                },
                parentProcedure: function pP() {
                    //  Must be UL tag
                    //  Check for qualified input
                    if (this) {
                        //  Find the nearest UL parent
                        var t = this.e.target
                        while (t.tagName !== 'UL') {
                            t = t.parentNode
                        }
                    }
                    if (t) {
                        console.log('qualified ' + this.e.type + ' ' +
                            this.e.target.className + ' ' +
           ...