ansaurus

Question

slideToggle table row using Jquery Help!

Answer 1

A:

From a quick glance it looks like you want something like this.

$('#link-1').click(function(){
    $('#more-info-1').slideToggle()
})

You can also generalize this script to work with all three by changing how the classes are set up, or by having the inner function parse the number of th link that is clicked and feed that into the inner jQuery call:

$('.more-info-link').click(function(){
    var id = $(this).attr('id');
    var num = id.substr(id.length-1,1);
    $('#more-info-'+num).slideToggle();
})

Craig 2009-07-13 19:49:08

I have done something like this, but this will not work properly when I need to click on the second or third item. I would like jQuery to automatically get the id of the tr and only open that selected tr.

2009-07-13 19:56:16

Ok I changed the answer so that it should work with all three. Does that work better?

Craig 2009-07-13 20:08:53

Answer 2

A:

Thanks, That works properly. The only thing is that the tr's are open when the page is loaded. Is there a way to keep them closed first and then open which ever one is clicked?

2009-07-13 20:21:42

Answer 3

A:

To keep the trs from being visible add style='display:none' to them.

Craig 2009-07-13 20:57:15

Answer 4

A:

Is there a way to do this dynamically, or is there a simpler way?

2009-07-13 21:00:34

Answer 5

+1 A:

Though craig's response works, you can limit your code and allow jquery to grab all of your TR elements within a certain scope, and parsing out the id as he suggested, etc.

$(".listings tbody tr").each(function(index) {
    // hide by default
    $(this).css({'display': 'none'});


    // set the onclicks
    $(this).click(function() {
      // your dosomething can change your appearance
      dosomething(the_id_you_parse_out);
    });
});

Not sure if thats working code, I just threw it together so you could get the gist of how to use jquery's selector.

brack 2009-07-16 01:16:27

Answer 6

A:

Depending on whether you need to assign a specific id to your elements for another purpose, you can actually do this without needing to give individual id's.

In this example, on load we first hide any tr that have the class toggleable. Then we tell jQuery to jump up the dom a couple of levels, and hide the next tr - this removes the need to call an id.

Example jQuery for this:

$(document).ready(function(){

$("#tableToggle tr.toggleable").hide();

$("#tableToggle .tableToggleButton").click(function(){
 $(this).parent().parent().next('tr').slideToggle();             
});

});

Example modified table:

<table id="tableToggle">
<tbody>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
</tbody>
</table>

Alex Osborn 2009-07-20 04:52:03

Answer 7

A:

Since jquery code usually executes only when the DOM is ready, you'll always see the TR's even if only for a millisecond until your js code hides it if you don't use CSS initially to hide it.

So most of the contributors here probably answered your question. I'd just like to add that you could initially hide the TR's using CSS and then use JS to do the rest.

A good rule of thumb is to try and get your "default" pageview by only using CSS, and then add the rich functionality with the jquery code. Or at least that's what I'd do.

Ettiene 2009-07-27 21:42:49

ansaurus

tags:

views:

answers:

slideToggle table row using Jquery Help!

related questions