JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test" id='div1' >
    <div>header</div>
    <div class="container">
        <div class="bigBlock hidden">data<br/><br/><br/>data end</div>
        <a href="#">click</a>
    </div>
</div>

<div class="test" id='div2'>
    <div>header</div>
    <div class="container">
        <div class="bigBlock hidden">data<br/><br/><br/>data end</div>
        <a href="#">click</a>
    </div>
</div>


<div class="test"  id='div3'>
    <div>header</div>
    <div class="container">
        <div class="bigBlock hidden">data<br/><br/><br/>data end</div>
        <a href="#">click</a>
    </div>
</div>

CSS

.test {
    border:1px solid black;
    
    margin-bottom:30px;
    min-width:500px;
}

.container{
    display: inline-block;            
}

.hidden {
    display:none !important;
    visibility:hidden;
}

JavaScript

$("a").click(function() {
    $(this).siblings(".bigBlock").toggleClass("hidden");
});