The JS used for other collapse boxes requires that there be an HTML duplicate of each collapsed box (with the duplicate just being the title bar). This is entirely unnecessary and completely inefficient. (One can simply hide the contents of the box, leaving only the header, using elementary CSS.)

Simply upload the image file shown just below this paragraph, edit the CSS to refer to it (replace all instances of "images/collapse.png"), and follow the fairly simple JS method described here. (About this image: a technique called "CSS sprites"^[1] is used to get the collapse, expand, remove (unused), shrink, and restore icons into one file.)


To rig up the JS, start by creating (from within the JS -- not from PHP! use createElement and appendChild!) two elements, a.collapse-button and a.shrink-button. They should be inserted into #file-images>div:first-child (that is, into the DIV that holds the "More Images" label). The As should have textual labels (which will be hidden from sighted users and replaced with icons, but remain legible to screen readers) that are padded with one space on each side (so that screen readers interpret them as, say, "shrink collapse" rather than "S-H-R-I-N-K-C-O-L-L-A-P-S-E"). Set their onclick attribute to add "collapsed" and "shrunk" classNames to #file-images (depending, of course, on which one is clicked). The CSS I've provided does the rest.

This will allow them to be opened in a new window/tab, and prevent them from breaking when JS is disabled. It's also fairly simple. No NOSCRIPT tags required, and only very minor PHP changes (mostly removals, and one or two ifs) needed.

You'd start by having the links' HTML point to the PHP URL for opening a tab. (As I'm sure you recall, there were URLs for the non-JavaScript links in the original design. You'd just write these same URLs using PHP.) You'd strip all JS from the tabs. And you'd have PHP write a "sel" class to the selected tab's LI element. (li#file_basic_link, etc.) Then, remove the STYLE attributes from the actual views (div#file_basic, etc.).

From there, you'd alter the JS (stored in an external file, of course). You'd have it add the event handlers from the outside (by finding the elements in the DOM and setting their onclick properties to anonymous functions). Instead of having it set the CSS display properties directly, you'd simply have it set a className on div#file-info. Ideally, the class would be the name of the tab ("basic", "edit", "comments", "reviews", "history", and "links"). (The sel class would also be added to the clicked tab's LI.) After setting the className, the handlers should return false to prevent the hyperlink from actually being followed.

Finally, you'd add this to the CSS:

Code

The effect is that the PHP would write out the tabs' default states (allowing people to link to a specific tab). The tabs would initially have no JS (allowing them to be opened in a new browser window/tab, and allowing them to work in browsers that have JS disabled for security reasons, by NoScript, etc.). The JavaScript would add itself to the tabs. Rather than altering any elements' styles directly, the JS would simply tab into the existing CSS, using the class names to show/hide tabs as needed. A rather elegant trick IMO.

This would be tricky (and would require a few things on the PHP side) but doable (and indeed, I've done it in a newer version of my draft. Not sure if you got the newest version; my apologies if you didn't). Here's a screenshot of what it could look like.

The filled-in stars show the file's average rating. The green backgrounds behind the stars show the viewer's rating (if the viewer has rated the file). The number of votes is shown as text. A SPAN has all of this information in prose form, and special CSS hides this SPAN from everything but screen readers (giving them a textual form of this information). For people who haven't yet rated the file, each of the star images is also a hyperlink to the server-side rating applying script thing.

And finally, the star images have no SRC attributes; they use CSS sprites^[1]. This allows anyone writing skins for the site to use whatever icons they wish, without any changes needing to be made to the PHP (as the icons are set using CSS). The display even handles files that lack enough votes to gain an average rating. (The image file has question mark sprites for such a case.)

I can provide the HTML and CSS (and I probably should, to make implementation as easy as possible). As for the PHP? Literally the only non-constant strings would be "<a{$star_href}><img></a>" ; "<span class='ratings r{intval($rating)} you-r{$viewer_rating}' title='{$rating}'>" ; "({$votes} votes)" ; and "<span class='voice-only'> You gave it {$viewer_rating} stars.</span>" . (Where $star_href is a string for a particular star's optional HREF, $rating is the decimal rating or "undetermined", $viewer_rating is the viewer's rating or 0, and $votes is the number of people who have rated the file.) Everything else is a matter of HTML and CSS; I have already coded both, and they should be trivial to implement.