JSFiddle - React, Tailwind, and code Playground

by Mohamed Mulla

HTML

<div id="stage1">

       <h2 id="location-1">Location</h2>
  <h2 id="jersey-1">JERSEY </h2>
       <h2 id="details-1">details</h2>

				
<div id="jersey-1t" style="display: none;">	ighlgkiuluil
</div>
<div id="location-1t">grjryjj
</div>				
<div id="details-1t" style="display: none;">fykyuk
</div>
				
</div>			
<div>---------------------------------------------------</div>
				   <div id="stage2">

       <h2 id="location-2">Location2</h2>
<div id="location-2t">grjryjj
</div>				
			
      <h2 id="jersey-2">JERSEY2 </h2>
				
<div id="jersey-2t" style="display: none;">	ighlgkiuluil
</div>

<h2 id="details-2">details2</h2>
<div id="details-2t" style="display: none;">fykyuk
</div>
				
</div>

JavaScript

$('h2').click(function(event){
    var $this = $(event.target),
        id = $this.attr('id'),
        partialId = id.split('-');
    
    if($('#'+id+'t').is(':visible')){
        $this.parent().children('div').slideUp();
    } else {
        $this.parent().children('div').slideUp();
        $('#'+id+'t').slideToggle();
    }    
});