JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<ul style="list-style: none;">
    <li>
        <div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;">156px X 156px</div>
        <div class="outer">
            <div class="inner">
                 <h1 style="color: white">A</h1>

            </div>
        </div>
    </li>
    <li>
        <div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;">156px X 156px</div>
        <div class="outer">
            <div class="inner">
                 <h1 style="color: white">B</h1>

            </div>
        </div>
    </li>
    <li>
        <div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;">156px X 156px</div>
        <div class="outer">
            <div class="inner">
                 <h1 style="color: white">C</h1>

            </div>
        </div>
    </li>
    <li>
        <div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;">156px X 156px</div>
        <div class="outer">
            <div class="inner">
                 <h1 style="color: white">A</h1>

            </div>
        </div>
    </li>
    <li>
        <div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;">156px X 156px</div>
        <div class="outer">
            <div class="inner">
                 <h1 style="color: white">B</h1>

            </div>
        </div>
    </li>
    <li>
        <div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;">156px X 156px</div>
        <div class="outer">
            <div class="inner">
                 <h1 style="color: white">C</h1>

            </div>
        </div>
    </li>
    <li>
        <div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px;...

CSS

.outer {
    position: absolute;
    width: 100%;
    background: black;
    left:0;
    top: auto;
    display: none;
    text-align: left;
}
.inner {
    background: black;
    padding: 50px 30px;
    position: relative;
}
li {
    display: inline-block;
}
li.active {
    margin-bottom:180px;
}

JavaScript

$('li').on('click', function (e) {
    var animatingElems = $(":animated");
    // make sure we're not currently animating an element or you'll get the jiggles again...
    if (animatingElems.length === 0) {
        var active = $(this).siblings('.active');
        var posTop = ($(this).position()).top;
        if (active.length > 0) {
            var activeTop = (active.position()).top;
            if (activeTop == posTop) {
                               $(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle('slow');
                $(this).find('.outer').slideToggle();
            } else {
                $(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
                $(this).find('.outer').slideToggle();
            }
        } else {
            $(this).find('.outer').slideToggle();
        }
        $(this).toggleClass('active', 400);
    }
});