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?