Error in hiding/showing div using jQuery

Question

The Story

We have a parent (div). Parent can have n children. The number of children the parent can have is decided by a PHP variable $bigF.

So, if $bigF is 5, then parent has 5 children. If it's 10, then it's 10. But $bigF has no role in this context because once the page is loaded, parent will have n children. It's not dynamic, you know, that's what I was trying to say.

<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>

In this example, parent has 3 children (div) and they are named child1,child2,child3. IDK who names a child child. That's bad parenting. And the freaking thing about this family drama is every child has 2 children(div). And they have bizarre names like grandchild1A,grandchild1B, grandchild2A and so on....

Parent is kinda shy. She believes only 1 child should be shown to the outside world. Rest of 'em are kept hidden, may be in the basement or something. But she has this one BIG rule written all over her face. If I CALL OUT A CHILD, THE CHILD AND THE GRANDCHILDREN SHOULD COME.

And she has employed 3 guards- who makes her job easy. And they are Call Child 1,Call Child 2,Call Child 3.

And this is how they do their job.

<script>
    $(".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");
    });
</script>

But every time they call a child, something bizarre happens. Sometimes child & the grandchildren come together. And some other time, the grand children went missing.

And they tried another way also, like:

var calling = $('div:visible').last().attr('id');

and returned with nothing.

Here's the proof. Fiddle

Can anyone help me investigate this story??? I offer Thanks in return. :)

Answer 1

In you fiddle just updat $("#parent div:visible").hide(); to $("#parent > div:visible").hide();

$(".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");
});

Answer 2

Another working solution:

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

I came to this solution because $("#parent div:visible").hide(); also hiding children elements, so i have added $('#'+calling+" div").css("display","block"); to show respective children also.

--Working DEMO--

Answer 3

Great narration,Hatsoff.

I have modified the code little bit. Please have a look at it.

 $(".callchild").click(function()
    {   
       
        var calling = $(this).attr('data-count');
       $('.click').hide();
        $('#'+calling).show();
    });

.callchild{
  background:aqua;
  width:100px;
  height:15px;
  border-radius:15px;
  padding:15px;
  margin:15px;
  cursor:pointer;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<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>

Answer 4

It's a nice story, but a little confusing :) If your goal is to toggle the children and grandchildren using the data-count attribute, try this:

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

Find an updated fiddle here.

Answer 5

The guards are hiding the grandchildren with this line:

$("#parent div:visible").hide();

because the grandchildren are divs within the parent. You need to apply that operation to just the immediate children of the parent, using >:

$("#parent > div:visible").hide();