JSFiddle - React, Tailwind, and code Playground

by D Marie

HTML

<div class="container">
        <div class="row">

            <article class="col-xs-3 work" id="realisation-1">
                <img src="https://cdn3.iconfinder.com/data/icons/business-8/512/suitcase-512.png">
                <br>
                <strong>Réalisation 1</strong>
                <br>
                <em>Projet Personnel - 2016</em>
                <div class="work_detail">
                    <hr/>
                    <div class="row">
                        <div class="col-xs-8 stagger5">
                            <img src="https://cdn3.iconfinder.com/data/icons/business-8/512/suitcase-512.png">
                        </div>
                        <div class="col-xs-4">
                            <h2 class="stagger1">Réalisation 1</h2>
                            <p class="stagger2">Front-End - Projet Personnel - 2016</p>
                            <ul class="stagger3">
                                <li>Blah</li>
                                <li>Blahblah</li>
                                <li>Blahblahblah</li>
                            </ul>
                            <p class="stagger4">Petite note</p>
                        </div>
                    </div>
                    <hr/>
                </div>
            </article>

            <article class="col-xs-3 work" id="realisation-1">
                <img src="https://cdn3.iconfinder.com/data/icons/business-8/512/suitcase-512.png">
                <br>
                <strong>Réalisation 2</strong>
                <br>
                <em>Projet Personnel - 2016</em>
                <div class="work_detail">
                    <hr/>
                    <div class="row">
                        <div class="col-xs-8 stagger5">
                            <img src="https://cdn3.iconfinder.com/data/icons/business-8/512/suitcase-512.png">
                        </div>
                        <div class="col-xs-4">
                            <h2...

CSS

body{
    margin:0;
    padding:0;
    width:100%;
}
img{
    width:100%;
    height:auto;
}
h2{
    margin-top:0;
}
em{
    opacity:0.6;
}
.remove{
}
.work{
    margin-top:10px;
    margin-bottom: 10px;
    margin-left:10px;
    margin-right:10px;
    cursor: pointer;
}
.col-xs-3{
    padding:0;
    width: 23%;
}
row{
    margin-right:0;
    margin-left:0;
}
.work_detail{
    display:none;
}
.stagger4{
    height:260px;
    overflow-y: hidden;
}

JavaScript

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

    var $active = false;

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

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

        var showElement = function () {
            $detail.append($work_detail);
            $work_detail.slideDown();

            // Animation stagger
            for (var i = 1; i <= 5; i++) {
                $('.stagger' + i, $work_detail).css({
                    opacity: 0,
                    marginLeft: -20
                }).delay(300 + 200 * i).animate({
                    opacity: 1,
                    marginLeft: 0
                });
            }
            $active = $work_detail;
            
            createButton();
        }
        
        function removeElement() {
            $active.slideUp(500);
        }
        
        function createButton() {
            // Création du bouton Remove
            ($active).prepend('<img id="remove" class="stagger1" style="width:20px;height:20px;float:right;cursor:pointer;" src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/cross-24-512.png">');

            document.getElementById("remove").addEventListener("click", removeElement);
        }
        
        var hideActive = function () {
            var $el = $active;
            $el.slideUp(500, function () {
                $el.remove();
            });
        }

        if ($active) {
            hideActive();
        }

        showElement();

    });

});