JSFiddle - React, Tailwind, and code Playground

by Francois Coron

HTML

<div class="work__box">
    <article class="work__thumb work">
        <img src="http://lorempicsum.com/simpsons/350/200/1" />
        <div class="work_detail" id="work-detail">
            <div class="wrap">
                <div class="work__description clearfix">
                    <h2 class="work__title">Work 1</h2>
                    <div class="work_detail--summary">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo facere optio maiores eveniet ducimus ea enim culpa mollitia atque ipsam reprehenderit facilis error soluta eos ipsum eligendi dolores incidunt delectus.</p>
                    </div>
                    <div class="work--gallery">
                        <img src="http://lorempicsum.com/simpsons/350/200/4"/>
                        <img src="http://lorempicsum.com/simpsons/350/200/2"/>
                        <img src="http://lorempicsum.com/simpsons/350/200/3"/>
                    </div>
                </div>
                <div class="work--close close">-</div>
            </div>
        </div>
    </article>
</div>
<div class="work--detail"></div>

SCSS

.work__thumb {
    text-align: center;
    img {
         cursor: pointer;  
    }   
}
.work_detail {
    display: none;
    text-align: center;
}

.work--close {
    display: block;
    background: red;
    width: 20px; height: 20px;
    color: #FFF;
    margin: 0 auto;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
}

JavaScript

jQuery(document).ready(function($){

    var $active = false;


    $('.work').click(function(e){
        e.preventDefault();

        var $work = $(this);

        if($work.hasClass('active')){
            return true;
        }

        var $close = $('.close');
        var $detail = $work.parent().nextAll('.work--detail:first');
        var $work_detail = $('.work_detail', $work).clone();

        // Affiche la div description du projet
        var showElement = function() {
            $detail.append($work_detail);
            $work_detail.slideDown(200);
            $active = $work_detail;
            scrollTo($detail);
        };

        // Masque la div description du projet
        var hideActive = function(){
            var $el = $active;
            $el.slideUp(500, function(){
                $el.remove();
            });
        };

        // Traitement : Lance les fonctions
        $('.work').removeClass('active');
        $work.addClass('active');

        if($active) {
            hideActive();
        }

        showElement();
    });
    
    // FERMER LE BLOC DETAIL AU CLICK
    $('.close').click(function() {
        $('.work--detail').slideUp();
    });
});


var scrollTo = function(cible) {
    $('html, body').delay(300).animate({scrollTop: cible.offset().top}, 750);
};