Collapsing and Expanding

When large sets of data are grouped in tables, as each year’s set of articles are in our News page, collapsing, or hiding, a section’s contents can be a convenient way to get a broad view of all of the table’s data without having to scroll so much.

To make the sections of the news article table collapsible, we first prepend a minus-symbol image to each subheading row’s first cell. The image is inserted with JavaScript, because if JavaScript is not available for the row collapsing, the image might confuse those who expect clicking on it to actually trigger some kind of event:

$(document).ready(function() {
  var toggleMinus = '../icons/bullet_toggle_minus.png';
  var togglePlus = '../icons/bullet_toggle_plus.png';
  var $subHead = $('tbody th:first-child');
  $subHead.prepend('<img src="' + toggleMinus + '"
                                    alt="collapse this section" />');
});

Note that we set variables for the location of both a minus-symbol and a plus-symbol...