jQuery traversing problem.

[seventeen]

Hey everyone, so i am still pretty lost with jquery and I'm trying to get this accordion script working with a table rather than an unordered list.

heres the function.


function initMenu() {
$('#inbox tr.messageBody').hide();
$('#inbox tr messageBody:first').show();
$('#inbox tr. messageHead a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('tr.messageBody')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('tr.messageBody')) && (!checkElement.is(':visible'))) {
$('#inbox tr.messageBody:visible').slideUp('slow');
checkElement.slideDown('slow');
return false;
}
});
}


heres the table.


<table id="inbox">
<tr>
<th>From:</th>
<th>Subject:</th>
<th class="date">Sent:</th>
</tr>
<tr class="messagehead">
<td><a href="#">Sender</a></td>
<td><a href="#">Subject</a></td>
<td class="date">Date</td>
</tr>
<tr class="messageBody">
<td colspan="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel risus. Aenean sollicitudin turpis. Quisque eu massa aliquam mi sodales tempor. Mauris scelerisque nisl at nulla. Sed posuere cursus turpis. Mauris pharetra faucibus nunc. Proin vulputate mauris non nulla. Praesent eget metus. Integer sapien sapien, commodo nec, volutpat quis, eleifend eu, neque. Integer non nulla. Aenean dapibus, libero vitae ullamcorper dictum, dolor sapien volutpat magna, eu interdum mi ipsum vel nunc. Maecenas aliquet mollis nisi. Aenean massa eros, lobortis vel, facilisis id, vulputate sit amet, dui. Praesent eleifend dui a ipsum. Phasellus convallis sapien sit amet erat. Praesent felis. Vivamus malesuada eros.
</td>
</tr>
<tr class="messagehead">
<td><a href="#">Sender</a></td>
<td><a href="#">Subject</a></td>
<td class="date">Date</td>
</tr>
<tr class="messageBody">
<td colspan="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel risus. Aenean sollicitudin turpis. Quisque eu massa aliquam mi sodales tempor. Mauris scelerisque nisl at nulla. Sed posuere cursus turpis. Mauris pharetra faucibus nunc. Proin vulputate mauris non nulla. Praesent eget metus. Integer sapien sapien, commodo nec, volutpat quis, eleifend eu, neque. Integer non nulla. Aenean dapibus, libero vitae ullamcorper dictum, dolor sapien volutpat magna, eu interdum mi ipsum vel nunc. Maecenas aliquet mollis nisi. Aenean massa eros, lobortis vel, facilisis id, vulputate sit amet, dui. Praesent eleifend dui a ipsum. Phasellus convallis sapien sit amet erat. Praesent felis. Vivamus malesuada eros.
</td>
</tr>
<tr class="messagehead">
<td><a href="#">Sender</a></td>
<td><a href="#">Subject</a></td>
<td class="date">Date</td>
</tr>
<tr class="messageBody">
<td colspan="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel risus. Aenean sollicitudin turpis. Quisque eu massa aliquam mi sodales tempor. Mauris scelerisque nisl at nulla. Sed posuere cursus turpis. Mauris pharetra faucibus nunc. Proin vulputate mauris non nulla. Praesent eget metus. Integer sapien sapien, commodo nec, volutpat quis, eleifend eu, neque. Integer non nulla. Aenean dapibus, libero vitae ullamcorper dictum, dolor sapien volutpat magna, eu interdum mi ipsum vel nunc. Maecenas aliquet mollis nisi. Aenean massa eros, lobortis vel, facilisis id, vulputate sit amet, dui. Praesent eleifend dui a ipsum. Phasellus convallis sapien sit amet erat. Praesent felis. Vivamus malesuada eros.
</td>
</tr>
</table>


So basically, I want to rows designated as 'messageHead' to always be visible. and for the accordian to work with the messageBodies.

How can I alter this script to work this way with the table. I think it has something to do with how .next() works. but I'm not sure.

Thanks for the help!

[seventeen]

nobody knows how I can do this?

[bootedbear]

Tables are odd ducks and have numerous browser quirks that could get in the way. It's rather strange to be trying to accordion one. Are you getting the same results in all browsers?

[etiger13]

yeah you should drop the tables and use divs. it will make working with jquery much easier

[effenay]

Hey everyone, so i am still pretty lost with jquery and I'm trying to get this accordion script working with a table rather than an unordered list.

...

First off, there are several typos in your code. Lines 3 and 4 should read:


$('#inbox tr.messageBody:first').show();
$('#inbox tr.messageHead a').click(

Also, your capitalization of messageHead is inconsistent.

Your main problem is that on line 6, $(this) refers to the element being clicked, i.e. the <a> tag. So, $(this).next() refers to the next sibling of the <a> tag, which doesn't exist. To reference the next row instead, replace that line with:

var checkElement = $(this).parents('tr').next();

HTH.