jQuery traversing problem.

Discussion in 'Web Design and Development' started by seventeen, May 10, 2009.

  1. seventeen macrumors member

    Joined:
    Apr 9, 2009
    Location:
    Denton, Tx
    #1
    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.

    Code:
    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.

    HTML:
    <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!
     
  2. seventeen thread starter macrumors member

    Joined:
    Apr 9, 2009
    Location:
    Denton, Tx
  3. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #3
    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?
     
  4. etiger13 macrumors member

    Joined:
    May 13, 2009
    #4
    yeah you should drop the tables and use divs. it will make working with jquery much easier
     
  5. effenay macrumors newbie

    Joined:
    May 13, 2009
    #5
    First off, there are several typos in your code. Lines 3 and 4 should read:

    Code:
    $('#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:

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

Share This Page