JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<h1> This is a fancy portfolio </h1>

<div id="moreinfo"> <a href="#" id="closegall">x</a>
    <br />
    <img src="http://dummyimage.com/fullbanner/a3a3a3/ff0048.png" alt="fullsize" />
    <ul class="list-inline">
        <li><a href="#" class="prevtrigger">PREV</a>
        </li>
        <li><a href="#" class="nexttrigger">NEXT</a>
        </li>
    </ul>
    <div id="details"></div>
</div>
<div class="containerspacer"></div>
<div class="galleryarea">
            <div class="portfoliotile">
                <img src="http://dummyimage.com/140/a3a3a3/ff0048.png" alt="thumb" class="trigger" />
                <div class="projectinfo">
                     <h1>Projecttitle 1</h1>

                    <p>1 Project decription goes right here.</p>
                </div>
            </div>
            <div class="portfoliotile">
                <img src="http://dummyimage.com/140/a3a3a3/ff0048.png" alt="thumb" class="trigger" />
                <div class="projectinfo">
                     <h1>Projecttitle 2</h1>

                    <p>1 Project decription goes right here.</p>
                </div>
            </div>


            <div class="portfoliotile">
                <img src="http://dummyimage.com/140/a3a3a3/ff0048.png" alt="thumb" class="trigger" />
                <div class="projectinfo">
                     <h1>Projecttitle 3</h1>

                    <p>1 Project decription goes right here.</p>
                </div>
            </div>
            <div class="portfoliotile">
                <img src="http://dummyimage.com/140/a3a3a3/ff0048.png" alt="thumb" class="trigger" />
                <div class="projectinfo">
                     <h1>Projecttitle 4</h1>

                    <p>1 Project decription goes right here.</p>
                </div>
    </div>

CSS

h1 {
    text-align: center;
}
.portfoliotile {
    border: 1px solid black;
    padding: 4px;
    margin: 20px;
    background-color: red;
    text-align: center;
}
#moreinfo {
    border: 1px solid black;
    padding: 4px;
    margin: 0 auto 20px auto;
    background-color: yellow;
    text-align: center;
}
.hidden {
   display:none;
}

.thin {height: 0px;}
.trigger {
    cursor: crosshair;
}
.dark {
    background-color: #7f1a1a;
}
.containerspacer {
    height: 0px;
}
.nexttrigger {
}

JavaScript

$(document).ready(function () {
// =============================================
// Basic Setup
// =============================================
    $('#moreinfo').addClass('hidden thin');
    $('.portfoliotile p').addClass('hidden');
    $('.portfoliotile h1').addClass('hidden');

    
// =============================================
// Trigger Function firing when image is clicked 
// =============================================
    $('.trigger').click(function () {
        $('.nexttrigger').css('visibility','visible');
        $('.prevtrigger').css('visibility','visible');
        if( $(".containerspacer").css('marginTop') == '180px') 
        {}
        
        else {
            $(".containerspacer").animate({
            marginTop: "+=180px"
        }, 1200);
        }
        $('.dark').removeClass('dark');
        $('#moreinfo').removeClass("hidden");
        $( ".thin" ).animate({"height":"300px"}, 1200);
        $(this).parent().addClass('dark');
        $(this).parent().addClass('activetile');
        $('#details').html($(this).parent().find('.projectinfo').html());
        $('#moreinfo h1').removeClass('hidden');
        $('#moreinfo p').removeClass('hidden');
    });
    
// =============================================
// Trigger Function closing Detail window 
// =============================================
    $('#closegall').click(function () {
        $(".containerspacer").animate({
            marginTop: "-=180px"
        }, 1200);
        $( ".thin" ).animate({"height":"0px"}, 1200);
        setTimeout(function(){
            $("#moreinfo").addClass("hidden");
         }, 1000);
        $('.portfoliotile').removeClass('dark');
        $('.portfoliotile').removeClass('activetile');
        $('#details').empty()
    });

    
// =============================================
// PREV NAVI
// =============================================
    $('.prevtrigger').click(function (e) {
        var activeEl = $(".portfoliotile.activetile");
        if...