JSFiddle - React, Tailwind, and code Playground

by Sajeev

HTML

<div id="parent">
    <div id="child1" class="click" style="display:block">
         Child1
         <div id="grandchild1A">
             grand child 1A
        </div>
         <div id="grandchild1B">
             grand child 1B
        </div>        
    </div>
    
     <div id="child2" class="click" style="display:none">
         Child2
         <div id="grandchild2A">
             grand child 2A
        </div>
        <div id="grandchild2B">
             grand child 2B
        </div>
    </div>
 
      <div id="child3" class="click" style="display:none">
         Child3
         <div id="grandchild3A">
             grand child 3A
        </div>
        <div id="grandchild3B">
             grand child 3B
        </div>
    </div>   
</div>

<br><br><br>
 Calling children down
 <br><br>
  <div class="callchild" data-count="child1"> Call Child 1</div>
  <div class="callchild" data-count="child2"> Call Child 2</div>
  <div class="callchild" data-count="child3"> Call Child 3</div>

JavaScript

$(".callchild").on('click',function()
	{   
	    //var calling = $('div:visible').last().attr('id');
	    //alert(calling);        
	    var calling = $(this).attr('data-count');
		$("#parent div:visible").hide();
		$('#'+calling).css("display","block");
    });