JSFiddle - React, Tailwind, and code Playground

by jackdent

HTML

<div id="showimage"></div>

<div class="gallery">
    <img src="http://0.tqn.com/d/culinaryarts/1/0/C/8/-/-/knifeanat1.jpg" alt="" />
</div>
<div class="gallery">
    <img src="http://www.denture-repairs-hertfordshire.co.uk/warning.png" alt="" />
</div>
<div class="gallery">
    <img src="http://4.bp.blogspot.com/_TeZ8mVULXc0/TS4vCR5reQI/AAAAAAAAI5Q/mQBDCKYe5uA/s1600/_letting_go_by.jpg" alt="" />
</div>
<div class="gallery">
    <img src="http://rlv.zcache.com/i_mustache_you_a_question_tshirt-p235014405629990250bahkm_400.jpg" alt="" />
</div>
<div class="gallery">
    <img src="http://thepowerofpull.com/wp-content/uploads/2010/11/UN-LOGO.jpg" alt="" />
</div>
<div class="gallery">
    <img src="http://www.ubelly.com/wp-content/uploads/2011/08/its-a-meme.jpg" alt="" />
</div>
<div class="gallery">
    <img src="http://s3images.coroflot.com/user_files/individual_files/302239_CauyLQoHZTkSJkkGnr3kVbFtw.jpg" alt="" />
</div>
<div class="gallery">
    <img src="http://www.booksshouldbefree.com/image/detail/Room-with-a-View.jpg" alt="" />
</div>

CSS

.gallery {
    display: inline-block;
}
.gallery img {height: 100px;}

JavaScript

var add_image = function(clicked) {
    var image_create = '<img src="' + clicked + '">';
    $('#showimage').hide().append(image_create).slideDown(400);
};

var change_image = function(clicked) {
    $('#showimage img').slideUp(400, function() {
        $(this).remove();
        add_image(clicked);
    });
};

var remove_image = function() {
    $('#showimage img').slideUp(400, function() {
        $(this).remove();
    });
};

$('.gallery').click(function() {
    var len = $('#showimage').children().length;
    var clicked = $("img", this).attr('src');
    if (len === 0) {
        add_image(clicked);
    } else if (len === 1) {
        change_image(clicked);
    }
});

$('#showimage').click(function() {
    remove_image();
});