JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  	<div class="overview">
        <div  class="item">Test1
        <div  class="content">
            <div class="full">
                <p>Content1</p>
            </div>
        </div>
        </div>
        <div class="item">Test2
        <div class="content">
    		<div class="full">
                <p>Content2</p>
            </div>
        </div></div>
        <div class="item">Test3
        <div class="content">
    		<div class="full">
                <p>Content3</p>
            </div>
        </div></div>
        <div class="item">Test4
        <div class="content">
    		<div class="full">
                <p>Content4</p>
            </div>
        </div></div>
        <div class="item">Test5
        <div class="content">
    		<div class="full">
                <p>Content5</p>
            </div>
        </div></div>
        <div class="item">Test6
        <div class="content">
    		<div class="full">
                <p>Content6</p>
            </div>
        </div></div>
        <div class="item">Test7
        <div class="content">
    		<div class="full">
                <p>Content7</p>
            </div>
        </div></div>
        <div class="item">Test8
        <div class="content">
    		<div class="full">
                <p>Content8</p>
            </div>
        </div></div>
        <div class="item">Test9
        <div class="content">
    		<div class="full">
                <p>Content9</p>
            </div>
        </div></div>
        <div class="item">Test10
        <div class="content">
    		<div class="full">
                <p>Content10</p>
            </div>
        </div></div>
        <div class="item">Test11
        <div class="content">
    		<div class="full">
                <p>Content11</p>
            </div>
        </div></div>
	</div>
</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;
	}
	.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

window.addEvent('domready', function() {
        $$('.item').each(function(el,ind){
            new Fx.Slide($$('.content')[ind]).toggle();
			el.addEvent('click', function(event){
				 $$('.item').hide();
				 $(this).show();
				 event.stop();     
				 var myVerticalSlide = new Fx.Slide($$('.content')[ind]).toggle();             

            }); 
        })
});//]]>