JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

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;
    heigth: 100px;
    position: relative;
    z-index:1;
    }
li.active {
    z-index:2;
}
li.active .box {
   display:none;
}
li.active .pop {
   display:block;
}
.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;zoom:1}

JavaScript

$('li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});