JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: relative; float: left; margin-right: 50px">

  <h1>Group Title</h1>
	
	<ul>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>    
	</ul>
  
</div>

<div style="position: relative; float:left">

  <h1>Group Title</h1>
	
	<ul>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>
	  <li>
      <h2 class="trigger">Sub Title</h2>
      <ol class="show">
			  <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
        <li>Link item</li>
			</ol>
		</li>    
	</ul>
  
</div>

CSS

.show {
  display:none;
  background: lightgrey; 
  width: 100%; 
  position: absolute; 
  top: 30px; 
  left:0;
}

JavaScript

$('.trigger').click(
  function(){
    $('.show').slideUp();
    $(this).next('.show').slideDown(); 
   }
);