Hello all, 
I am creating a heirarchical structure between account and contact using pageblocktable within another pageblocktable. I have a div tag that is holding the contacts pageblocktable for each account. On click of the account row only that perticular contact should be visiable all should hide. but when I try to get the Id of the div, it is saying as undefined. here is my code, please help!!

 

<apex:page controller="accountrecordsgetting" >
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

$('.listener').click(function(){
var vaid = $(this).find('.valid').attr('id');
alert('id is-->'+vaid);
$('.listener').each(function(){
$('tr').css("background-color", "none");
});
$(this).closest('tr').css("background-color", "yellow");
});
});
</script>
<apex:form >

<apex:pageblock >
<apex:variable value="{!1}" var="count"/>
  <apex:pageBlockTable value="{!acts}" var="a"  >

  <apex:column value="{!a.name}" styleClass="listener" />
    <apex:column value="{!a.id}" styleClass="listener"/>
    <apex:column breakBefore="true" colspan="3" >
    <apex:variable value="{!count+1}" var="count" />
  <div id="{!Count}" style="display:none" styleClass="valid" >
    <apex:pageBlockTable value="{!a.contacts}" var="c"  >

    <apex:column value="{!c.Id}" styleclass="sublistener" />
    <apex:column value="{!c.name}" styleclass="sublistener"  />
</apex:pageBlockTable>
</div>
</apex:column>
  </apex:pageBlockTable>

  </apex:pageblock>
  </apex:form>
</apex:page><apex:page controller="accountrecordsgetting" >
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){

$('.listener').click(function(){
var vaid = $(this).find('.valid').text();
alert('id is-->'+vaid);
$('.listener').each(function(){
$('tr').css("background-color", "none");
});
$(this).closest('tr').css("background-color", "yellow");
});
});
</script>
<apex:form >

<apex:pageblock >
<apex:variable value="{!1}" var="count"/>
  <apex:pageBlockTable value="{!acts}" var="a"  >

  <apex:column value="{!a.name}" styleClass="listener" />
    <apex:column value="{!a.id}" styleClass="listener"/>
    <apex:column breakBefore="true" colspan="3" >
    <apex:variable value="{!count+1}" var="count" />
  <div id="{!Count}" style="display:none" styleClass="valid" >
    <apex:pageBlockTable value="{!a.contacts}" var="c"  >

    <apex:column value="{!c.Id}" styleclass="sublistener" />
    <apex:column value="{!c.name}" styleclass="sublistener"  />
</apex:pageBlockTable>
</div>
</apex:column>
  </apex:pageBlockTable>

  </apex:pageblock>
  </apex:form>
</apex:page>

Controller is:

public class accountrecordsgetting {
public list<account> acts{get; set;}
public accountrecordsgetting (){

acts= [select id,name, (select id,name from contacts) from account limit 10];

}

}