www.webdeveloper.com
Results 1 to 2 of 2

Thread: Table Accordion

Threaded View

  1. #1
    Join Date
    Feb 2011
    Posts
    83

    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>
    1.jpg

    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,
    Last edited by wow; 01-23-2013 at 01:25 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles