JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="headline">dsd asd sdf <A href="http://www.madaj.net/">dsf sdfs</a> dfsd </div>
    <div  class="more">more</div>
	<div  class="dropdown">
        Content prvy
	</div> <!-- md -->
</div> <!-- ms -->    

<div class="box">
    <div class="headline">dsd asd sdf dsf sdfs dfsd </div>
	<div  class="more">more</div>
	<div class="dropdown">
    Content druhy
	</div> <!-- md -->
</div> <!-- ms -->
    
<div class="box">
    <div class="headline">dsd asd sdf dsf sdfs dfsd </div>
	<div  class="more">more</div>
	<div  class="dropdown">
    Content treti
	</div> <!-- md -->
</div> <!-- ms -->

CSS

body { background:#555555; }

.box{
background:#ffffff;
margin:1px;
width:25%; float:left;
padding:8px;
}

.more { text-align:center; }
.dropdown{
/*
    height: 40px;
    width: 150px;
    position: absolute;
    top: 20px;
    left: -1px;
    overflow: scoll;
    border: 1px solid #909090;
*/
    display: none;
    position: fixed;
    background:#d2d2d2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
z-index:100000;
    padding:32px;
}


.title_active{
    
}

JavaScript

$(document).ready(function () {

    // roztvoreny obsah zatvori
    $(this).on('click',".box, .dropdown", function (e) {
          // Efekt zatvorenia
          // $(this).hide();
          // $(this).slideUp("slow");
        $(this).fadeOut("slow");
    });

    // zavesenie akcii na zobrazene boxy, aby roztvarali dalsi obsah
    $(this).on('click',".box, .box div", function (e) {
        e.stopPropagation();
        var drop = $(this).siblings('.dropdown');

        // ak je dalsi text skryty, urob toto        
        if (drop.is(":hidden")) {
            $('.title_active').removeClass("title_active")
            // najprv vypni pripadne zobrazene ostatne boxy
            .siblings('.dropdown').hide();
            // efekt otvorenia
            // drop.show();
            // drop.slideDown( "slow" );
            drop.fadeIn( "slow" );
            // pripadne zmeny vzhladu
            $(this).addClass("title_active");
            $(this).parent().addClass("ms_active");
        } else {
            // efekt zatvorenia
            // drop.hide();
            // drop.slideUp("slow");
            drop.fadeOut("slow");
            $(this).removeClass("title_active");
        }
    });
});