JSFiddle - React, Tailwind, and code Playground

HTML

<div class="big_container">
    <div class="wrappers">
        <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
        <div class="item" data-content="blabla BLALALA bla blaaaa">Click on meee!</div>
        <div class="item" data-content="blabla blBLALbla blaaaa">Click on meee!</div>
    </div>
    <div class="wrappers">
        <div class="item" data-content="blabla bla bla randomness">Click on meee!</div>
        <div class="item" data-content="blabla bla bla ">Click on meee!</div>
        <div class="item" data-content="blabla bla bla weeee">Click on meee!</div>
    </div>
    <div class="wrappers">
        <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
        <div class="item" data-content="blabla bla bla???">Click on meee!</div>
        <div class="item" data-content="I am done with blaaaaing">Click on meee!</div>
    </div>
    <div class="details">The content from div goes here:
        <div class="div_content"></div>
    </div>
</div>

CSS

.big_container {
    background: #141414;
    display: block;
    padding: 30px;
}
.wrappers {
    width: 500px;
    margin: 0 auto;
    display: block;
}
.item {
    width: 31%;
    height: 100px;
    margin-right: 1%;
    margin-bottom: 30px;
    text-align: center;
    background: #ccc;
    color: #fff;
    display: inline-block;
}
.details {
    background: #ddd;
    width: 100%;
    padding: 30px;
    display: none;
}

JavaScript

var $content = $(".big_container");
var $loaded_content = $(".details");
var $item_selector = $(".item");

if ($content.length > 0) {
    $item_selector.on('click', function (e) {
        e.preventDefault();

        var $this = $(this);

        load_gallery_container($this);
    });
}

function load_gallery_container($container) {
    if ($container.hasClass("current")) {
        $loaded_content.slideUp('slow', function () {
            $(this).removeClass('open');
            $container.removeClass("current");
        });
    } else {

        var $insert_after = $container.parent('.wrappers'),
            $current = $('.current');
            $current.removeClass('current');

        if ($current.parent('.wrappers').is($insert_after)) {
            $loaded_content.find('.div_content').html($container.data('content'));
            $container.addClass("current");
        } else {
            if ($loaded_content.hasClass("open")) {
                $loaded_content.slideUp('slow', function () {
                    $(this).removeClass('open');
                    $container.removeClass("current");

                    $loaded_content.detach().insertAfter($insert_after);
                    $loaded_content.find('.div_content').html($container.data('content'));
                });
            } else {
                $loaded_content.detach().insertAfter($insert_after);
                $loaded_content.find('.div_content').html($container.data('content'));
            }

            $loaded_content.slideDown('slow', function () {
                $container.addClass("current");
                $(this).addClass('open');
            });
        }
    }
    setTimeout(function () {
        $('html, body').animate({
            scrollTop: $loaded_content.offset().top - 300
        }, 500);
    }, 600);
}