2 Replies - 3244 Views - Last Post: 02 November 2012 - 05:12 PM

#1 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 439
  • View blog
  • Posts: 1,864
  • Joined: 30-April 10

Traversing issues using a table for accordion

Posted 02 September 2012 - 11:38 AM

I have a table..
<table id="accordion">
    <tr><th class="head">Head</th></tr>
    <tr><td class="show">Row</td></tr>
    <tr><td class="show">Row 2</td></tr>
</table>
<table id="accordion">
    <tr><th class="head">Head 2</th></tr>
    <tr><td class="show">Row</td></tr>
    <tr><td class="show">Row 2</td></tr>
</table>​


That i want to accordion.

I am trying to get the heads to be clicked and the td to show beneith it.

my js is..
$(document).ready(function() {
    $("#accordion td").hide();
    
    $(".head").click(function(){
        $(this).parents("#accordion").siblings("td").show();
    });
});​


I don't know who to use jquery too well and have been having a lot of trouble only showing the td rows that are below the head class. I have tried children and filter and I seem to have a problem selecting the td tags to show them.
I don't need an answer to fix the problem I need some explanation as to why this is not getting the td tags I need.

Is This A Good Question/Topic? 0
  • +

Replies To: Traversing issues using a table for accordion

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Traversing issues using a table for accordion

Posted 02 November 2012 - 03:20 AM

Hello there, here's your problem(s),

One: The parent of the TH is a TR, not the TABLE, the TR does not contain the other TR's. You will need to go up two parents to find the TABLE and then back into the children.

Two: The children function will only get the TR's of the TABLE, not the underlying TD's inside the TR's. To get the TD's without having to search through each TR, use the find function.

$(document).ready(function() {
		$("#accordion td").hide();
		
		$(".head").click(function(){
			$(this).parent().parent().find("td").show();
		});
	});

Was This Post Helpful? 2
  • +
  • -

#3 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 439
  • View blog
  • Posts: 1,864
  • Joined: 30-April 10

Re: Traversing issues using a table for accordion

Posted 02 November 2012 - 05:12 PM

I was not aware that you could nest the parents nodes like this. thank you this makes more sense.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1