JSFiddle - React, Tailwind, and code Playground
HTML
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
CSS
.div{
width:400px;
}
.content{
padding:10px;
}
#view{
color:red;
cursor:pointer;
}
.hidden-content{
display:none;
}
.hidden-content .active{
display:block;
}
JavaScript
$("#view").click(function(){
$('.hidden-content').slideToggle(500).toggleClass("active");
});