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.
