Table Accordion

[wow]

Hi there,

The table accordion is defined as below:

<div id="celebs">
  <table id="accordion" border="1">
    <tr class="active"><td>Organizer</td><td>4</td><td>4</td><td>$172</td></tr>
    <tr><td colspan="4">
      <table><tr><td>Apple</td><td>B</td><td>$28.00</td><td>1[C]/[D]</td></tr>
	<tr><td>Strawberry</td><td>B</td><td>$28.00</td><td>1[C]/[D]</td></tr>
	<tr><td>Pear</td><td>H</td><td>$48.00</td><td>1[C]/[D]</td></tr>
      </table></td></tr>
     <tr><td>Steve</td><td>4</td><td>4</td><td>$172</td></tr>
     <tr><td colspan="4">
  	<table border="0">
  	  <tr><td>Grape</td><td>B</td><td>$28.00</td><td>1[C]/[D]</td></tr>
  	  <tr><td>Banana</td><td>B</td><td>$32.00</td><td>1[C]/[D]</td></tr>
  	</table></td></tr>
      <tr><td>Tina</td><td>4</td><td>4</td><td>$172</td></tr>
      <tr><td colspan="4">
  	<table border="0">
  	   <tr><td>Apple</td><td>G</td><td>$58.00</td><td>1[C]/[D]</td></tr>
  	   <tr><td>Banada</td><td>G</td><td>$88.00</td><td>1[C]/[D]</td></tr>
	   <tr><td>Orange Juice</td><td>G</td><td>$58.00</td><td>1[C]/[D]</td></tr>
	   <tr><td>Black Tea</td><td>K</td><td>$68.00</td><td>1[C]/[D]</td></tr>
  	</table></td></tr>
      <tr><td>John</td><td>4</td><td>4</td><td>$172</td></tr>
      <tr><td colspan="4">
  	 <table border="0">
  	    <tr><td>Stawberry</td><td>B</td><td>$28.00</td><td>1[C]/[D]</td></tr>
  	    <tr><td>Grapefood</td><td>B</td><td>$25.00</td><td>1[C]/[D]</td></tr>
	    <tr><td>Loogan</td><td>B</td><td>$28.00</td><td>1[C]/[D]</td></tr>
  	</table></td></tr>
  </table> 
</div>

1.jpg

The script to handle it is as below:

$(document).ready(function(){
  $('#celebs table table')
    .click(function(event){
      event.stopPropagation();
    })
    .filter(':not(:first)')
    .hide();
    
  $('#accordion tr').click(function(){
    var selfClick = $(this).find('ul:first').is(':visible');
    if(selfClick) {
      return;
    }
    $(this)
      .parent()
      .find('> tr td table:visible')
      .slideToggle();
    
    $(this)
      .parent()
      .find('> tr[class="active"]')
      .removeClass('active');

    $(this).addClass('active');

    $(this)
      .parent()
      .find('> tr[class="active"]')
      .find('table:first')
      .stop(true, true)
      .show();
  });
});

At the start, the first accordion will be expanded with all others are collapsed. When one is clicked, the expanded will be collapsed and active class will be removed (its color is changed to normal, it's red when class = active). But the table direct after the clicking row doesn't expand. No matter it is

 $(this)
      .parent()
      .find('> tr[class="active"]')
      .find('table:first')
      .stop(true, true)
      .show();

or

$(this)
  .find('table:first')
  .stop(true, true)
  .show();

or

$(this)
  .next('tr td table')
  .show()

All do not expand the table after it. What's wrong? What should be the last selector to make the table after the click row expanded?

Thanks,

[wow]

Could any body tell, when the following "tr of Tina" is pointed by this, how to locate the table element?

 <tr><td>Tina</td><td>4</td><td>4</td><td>$172</td></tr>
 <tr><td colspan="4">
      <table border="0">
         <tr><td>Apple</td><td>G</td><td>$58.00</td><td>1[C]/[D]</td></tr>
         <tr><td>Banada</td><td>G</td><td>$88.00</td><td>1[C]/[D]</td></tr>
         <tr><td>Orange Juice</td><td>G</td><td>$58.00</td><td>1[C]/[D]</td></tr>
         <tr><td>Black Tea</td><td>K</td><td>$68.00</td><td>1[C]/[D]</td></tr>
      </table></td></tr>

Below code doesn't work

 $(this)
    .parent()
      .find('> tr[class="active"]')
      .find('table:first')
      .stop(true, true)
      .show();or

$(this)
  .find('table:first')
  .stop(true, true)
  .show();or

$(this)
  .next('tr td table')
  .show()

Thanks,