Table Accordion

Hi there,

The table accordion is defined as below:

Code:

---

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

---

Attachment 15333

The script to handle it is as below:

Code:

---

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

Code:

---

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

---

or

Code:

---

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

---

or

Code:

---

$(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,

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

Code:

---

<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

Code:

---

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

---

Code:

---

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

---

Code:

---

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

---

Thanks,