JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <div class="col xl-1-3 lg-1-3 md-1-1 sm-1-1" id="vpc-components">
 
 <div class="top">
      click me
    </div>
    
 <div id="component-1” class="vpc-component" data-component_id="component-1"><div>1</div></div>

<div id="component-2” class="vpc-component" data-component_id="component-2">2</div>

<div id="component-3” class="vpc-component" data-component_id="component-3">3</div>

<div id="component-4” class="vpc-component" data-component_id="component-4">4</div>

<div id="component-5” class="vpc-component" data-component_id="component-5">5</div>

<div id="component-6” class="vpc-component" data-component_id="component-6">6</div>

<div id="component-7” class="vpc-component" data-component_id="component-7">7</div>

<div id="component-8” class="vpc-component" data-component_id="component-8">8</div>

<div id="component-9” class="vpc-component" data-component_id="component-9">…</div>

<div id="component-10” class="vpc-component" data-component_id="component-10">…</div>

</div>

CSS

.top {
  padding: 12px;
  background-color: blue;
  color: white;
  cursor: pointer;
}

JavaScript

$('.top').on('click', function() {
	$parent_box = $(this).closest('.vpc-component');
	$parent_box.siblings().find("#component-1, #component-2, #component-3, #component-4, #component-5").slideUp();
	$parent_box.find('#component-1').slideToggle(100, 'swing');
});