JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="productbox"><button>1</button></div>
<div class="productbox"><button>2</button></div>
<div class="productbox"><button>3</button></div>
<div class="productbox"><button>4</button></div>
<div class="productbox"><button>5</button></div>
<div class="productbox"><button>6</button></div>
<div class="productbox"><button>7</button></div>

CSS

.productbox {
    float:left;
    width:16%;
    height:100px;
    background:#000;
    margin:5px;
    color:slate
}
.hide {
    display:none;
}
.expandthebox {
    width:100%;
    height:200px;
}

JavaScript

$(function () {
    $("button").click(function () {
        $(this).parent().toggleClass("expandthebox", 1500);
        $(this).parent().siblings().removeClass('expandthebox', 1500)
        return false;
    });
});