JSFiddle - React, Tailwind, and code Playground
HTML
<div class="group">
<div class="item 1">
<div class="trigger"></div>
<div class="toggle_container">1</div>
</div>
<div class="item 2">
<div class="trigger"></div>
<div class="toggle_container">2</div>
</div>
<div class="item 3">
<div class="trigger"></div>
<div class="toggle_container">3</div>
</div>
<div class="item 4">
<div class="trigger"></div>
<div class="toggle_container">4</div>
</div>
</div>
<div class="group">
<div class="item 5">
<div class="trigger"></div>
<div class="toggle_container">5</div>
</div>
<div class="item 6">
<div class="trigger"></div>
<div class="toggle_container">6</div>
</div>
<div class="item 7">
<div class="trigger"></div>
<div class="toggle_container">7</div>
</div>
<div class="item 8">
<div class="trigger"></div>
<div class="toggle_container">8</div>
</div>
</div>
CSS
.item{
display:block;
width:50px;
height:50px;
float:left;
margin:5px;
background-color:#999;
}
.group{
width:250px;
float:left;
background-color:blue;
}
.trigger{
width:50px;
height:20px;
background-color:#ccc;
}
JavaScript
$('.trigger').not('.trigger_active').next('.toggle_container').hide();
$('.trigger').click( function() {
var trig = $(this);
if ( trig.hasClass('trigger_active') ) {
trig.next('.toggle_container').slideToggle('slow');
trig.removeClass('trigger_active');
$(".group").css({'height':($(".trigger_content").height()+'px')});
} else {
$('.trigger_active').next('.toggle_container').slideToggle('slow');
$('.trigger_active').removeClass('trigger_active');
trig.next('.toggle_container').slideToggle('slow');
trig.addClass('trigger_active');
$(".group").css({'height':($(".trigger_content").height()+'px')});
};
return false;
});