I have a table that contains information that is hidden within a 'td'
element. Users can access this information if they wish by clicking on
a link that is held in another 'td' element on the previous row (table
structure below):

<table>
<tr>
    <td><a href="#" class="install_toggle">Show options</a></td>
</tr>
<tr>
    <td class="install">some option info</td>
</tr>
<tr>
    <td><a href="#" class="install_toggle">Show options</a></td>
</tr>
<tr>
    <td class="install">some option info</td>
</tr>
</table>

i have given each link a class name: install_toggle
i hav given the hidden 'td' elements a class name: install

on the click of the link with the class name: install_toggle, i want
the next 'td' element with the class name: install to toggle.

this is what i have gotten so far:

        $(function() {
                $('td.install').addClass('hide');

                $('a.install_toggle').toggle(function() {
                $(this).html('Hide Options');
                $(this).next('.install').removeClass('hide');
          },function(){
                $(this).html('Show Options');
                $(this).next('.install').addClass('hide');
                });
        });

This does not work. What am i doing wrong?

Reply via email to