Toggling table rows with JQuery

Sometimes webpages and forms grow too large to be viewed comfortably. This can confuse the user. It is kind of like a kid dumping out his toy boxes on the floor all over the house. Now he can’t find anything and the landscape becomes daunting to navigate.

A quick solution in the web world is to collapse a section. This will work for divs or tr (table rows), etc.

Using JQuery, I can select a class and tell it to collapse everything until the next class instance. This is a very quick way to enhance the usability of your tables, forms, etc. The code below collapses on table headers (th), but you can modify to be used elsewhere.

<script>
$(function() {
$(‘.subheader’).click(function(){
$(this).nextUntil(‘th.subheader’).slideToggle(500);
});
});
</script>

Leave a Reply