JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slice1" class="clickable group1">slice1 clickme</div>
<div id="slice2" class="clickable group2">slice2 clickme</div>
<div id="slice3" class="clickable group3">slice3 clickme</div>
<div id="post1" class="post">post1</div>
<div id="post2" class="post">post2</div>
<div id="post3" class="post">post3</div>

CSS

div {
    background: #eee;
    margin: 1em;
    height: 100px;
}
.clickable {
    float: left;
    height:30px;
    background: red;
    color: white;
}
.post {
    height: 50;
    clear: both;
}

JavaScript

$(".clickable").each(function(idx, elem) { // register click for slides
    elem = $(elem);
    elem.click(function() {
       scaleClicked(elem); 
    });
});

function scaleClicked(elem) { // slide clicked
     var id = elem.attr("id"),
         num = id.slice(-1),
         postId = "post"+num,
         posts = $(".post");
    posts.each(function(idx, p) {
        if($(p).attr("id") == postId) { 
            scaleUp(p);
        }
        else {
             scaleDown(p);   
        }
    });
        
}

function scaleUp(item) {
    $(item).animate({height:100},1000);
}
function scaleDown(item) {
    $(item).animate({height:30},1000);
}