Individual element selection

[elliot hesp]

Hello!

I'm pretty handy with jQuery, however I have been asked to use MooTools this time.

I have run into a little problem that I can't work out:

1. I have a table with 'x' rows in it.
   
2. Each table has an option (text link) in it to 'show more'.
3. When this is clicked, a hidden row below the one that was click appears with some more information - basically a slide down.
4. When the link is clicked again, the extra info row slides back up and becomes hidden again.

The simplified code for the table is:

<tr>
<td><a id='v_toggle' href='#'>Toggle</a></td>
</tr>


<tr id='vertical_slide'>
<td>Toggled content</td>

</tr>

So basically the first row can appear x times and is always visible.

The second row starts off hidden and appears via slide down when the 'Toggle' link is clicked.

The MooTools for this is currently:

<script language="Javascript" type="text/javascript">
window.addEvent('domready', function() {

   var myVerticalSlide = new Fx.Slide('vertical_slide', {mode: 'vertical'});
  myVerticalSlide.hide();
 
   $('v_toggle').addEvent('click', function(event){
  event.stop();
  myVerticalSlide.toggle();
   });
});
</script>

If only one row from the database is produced, then this works fine.

However, if more than 1 row is produced, then the toggle just for the first row works - all the other hidden rows are shown and the toggle does nothing.

I assume there needs to be some 'this' statement or something, however I just can't work it out.

Any help would be awesome.

[elliot hesp]

I made in JS Fiddle:

http://jsfiddle.net/KU9Ag/ 

As you can see, row 1 works, but the rest after do not...

[ghazal]

hello,
try this if you have access to the DOM :
http://jsfiddle.net/zzB38/1/

[Aaron Newton]

1) consider doing this at click-time with delegation. A large table with Ghazal's example will perform very slowly because on load it must iterate over the table and set up instances of Fx.Slide.

2) if you want to use this with a table object, you're going to run into problems because of how tables are kind of funky in their display. Fx.Slide will definitely not work and, really, you'll have trouble with most effects that transition size on the row. You can easily toggle visibility, but not transition things smoothly.

Here's an example that's much easier but also differs the instantiation until the user actually clicks an item:

http://jsfiddle.net/M7pm7/ 

If you have to use tables, use the this instead:

http://jsfiddle.net/7zBU3/ 

[elliot hesp]

Thanks, that last one is how I would like to do it :)

However, if I have more than 1 td in each row, how would I go about making it so some text in a td was clickable and toggled the hidden content?

http://jsfiddle.net/7zBU3/1/ 

That basically shows a simplified version of what I have, however I would like the 'Toggle' text to be clickable, and that does the same effect as what you had before :)

Thanks!

[Aaron Newton]

http://jsfiddle.net/7zBU3/2/