JSFiddle - React, Tailwind, and code Playground

by Cheffchen

HTML

<div class="wrapper">
            <div id="overview">
                
                <div class="row row1">
                    <div  class="item">
                        <div class="item-preview">Test</div>
                        <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                    </div>
                    
                    <div  class="item">
                        <div class="item-preview">Test</div>
                        <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                    </div>
                    
                    <div  class="item">
                        <div class="item-preview">Test</div>
                        <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                    </div>
                    
                    <div  class="item">
                        <div class="item-preview">Test</div>
                        <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                    </div>
                </div>
                
                <div class="row row2">
                    <div  class="item">
                        <div class="item-preview">Test</div>
                        <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                    </div>
                    
                    <div  class="item">
                        <div class="item-preview">Test</div>
                        <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
                    </div>
                    
                    <div  class="item">
                        <div class="item-preview">Test</div>
                        <div class="item-content">Das ist ein Test mit viel Text rund um den Test Preview zeugs</div>
        ...

CSS

.wrapper {
    max-width: 613px;
    float: left;
    position: relative;
}
.new {
    border: solid 1px #ddd;
    padding: 5px;
    float: left;
    max-width: 660;
    min-width: 320px;
}
.item {
    width: 120px;
    padding: 10px;
    display: block;
    background-color: #CCC;
    float: left;
    margin: 5px;
    position: relative;
}
.row {
    overflow: hidden;
}

    .item .item-preview {
        position: relative;
        z-index: 10;
        display: block;
    }

    .item .item-content {
        /*display: none;*/
       position: absolute;
       left: 0px;
       top: 37px;
       padding: 5%;
       z-index: 11;
       width: 90%;
       background-color: #000;
       color: #FFF;
    }

.content {
    padding: 10px;
    height: 80px;
    visibility: hidden;
}
.item:hover > .content {

}
.full {
    position: absolute;
    width: 100%;
    display: block;
    height: 100px;
    background-color: #666;
    left: 0px;
}

JavaScript

var myAccordenFunction = "";
	var myAccordion = new Fx.Accordion($$('.item-preview'), $$('.item-content'), {
    display: -1,
    alwaysHide: true,
    
    onActive: function(toggler, element) {
    		var size = element.getScrollSize();
  			element.getParent('.row').morph({
	      'padding-bottom': size.y+'px'
	    });
	    
	    myAccordenFunction = "activate";
  		},
    
    onBackground: function(toggler, element) {
    		if(myAccordenFunction != "activate") {
    			element.getParent('.row').morph({
		      'padding-bottom': '0px'
		    });
    		}
  		},
    
    onComplete: function(toggler, element) {
    		if(myAccordenFunction == "activate") {
    			myAccordenFunction = "";
    			
	    		var size = element.getScrollSize();
    			element.getParent('<.row').morph({
		    });
    		}
  		},
});