Have you ever turned on the Collapsible Data Area property on a group box or grid? If you do, all you get on the page to expand or collapse your group box or grid is a little tiny triangle at the far left of the group box or grid label. It isn't that easy to click. Wouldn't it be better if you could click the entire bar to make your grid or group box expand or collapse? Well, here's a little snippet of JavaScript using jQuery that lets you do this.
//% New JavaScript used for making the entire bar of an Expandable/Collapsible Group Box clickable.
$(document).ready(function(){
//%This line finds all <img> elements with a title of "Expand section" or "Collapse Section", then gets the parent <a>,
//%then the parent <td>. On this <td> it 1.) updates the css to make the cursor a pointer and 2.) adds a click handler
$("img[title='Expand section'],img[title='Collapse section']").parent('a').parent('td').css('cursor','pointer').click(function(){
//%The click handler added to this <td> is a new function taken from the first <a> element that can be found in relation to this <td>
var theClick=new Function($("a img[title='Expand section'], a img[title='Collapse section']", this).parent('a').attr("href"));
theClick();
});
});
Points to Consider
- Based on PeopleTools 8.50 with a SWAN stylesheet.
- This code works on group boxes with a title positioned on the left of the group box. With group boxes where the title is positioned in the center or to the right it might not work. Or with grids that have any of the navigation bar items displayed then this will likely not work.
- Because of these limitations, I would not include this code on PT_PAGESCRIPT to make it a system wide feature. I instead would only include it on specific pages where I know the group box(es) or grid(s) will be formatted in the correct manner.
Summary
This has been another relatively simple example of how jQuery can make your PeopleSoft pages that much better.
