JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
<div class="panel panel-default">
<div class="panel-heading nodeHeading">Panel heading</div>
<div class="panel-body" style="display:none;">Panel body</div>
</div>
...
CSS
.panel-heading{
border: solid #ccc;
margin-bottom:2%;
padding:2%;
}
JavaScript
$(".panel-heading").click( function() {
$(this).next().slideToggle('slow');
});