JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<ul>
    <li>
        <div class='box'></div>
        <div class='pop'></div>          
    </li>
    
    <li>
        <div class='box'></div>
        <div class='pop'></div>          
    </li>
    
    <li>
        <div class='box'></div>
        <div class='pop'></div>          
    </li>
    
    <li>
        <div class='box'></div>
        <div class='pop'></div>          
    </li>
    
    <li>
        <div class='box'></div>
        <div class='pop'></div>          
    </li>
    
    <li>
        <div class='box'></div>
        <div class='pop'></div>          
    </li>
    
    <li>
        <div class='box'></div>
        <div class='pop'></div>          
    </li>
</ul>

CSS

ul {
    float: left;
    width: 306px;
    position: relative;}

li {
    border: 1px solid #666;
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    }

.box {
    height: 100px;
    width: 100px;
    background: #ccc;}

.pop{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 200px;
    background: #333;
    z-index: 9999;}

JavaScript

$('li').click(function() {
    $('.pop').hide();
    $(this).find('.pop').show();
    
    $('li').css('position', 'static');
    $(this).css('position', 'relative');
});