CSS to support details tag in un-details-savvy browsers

gistfile1.css

@import "compass/css3";

/* make details & summary display as block elements in browsers
where they're not supported (ahem... all of them). */
details, summary {
	display: block;
}

/* hide the dropdown arrow if the browser supports details */
.arrow {
	display: none;
}

.no-details summary {
	cursor: pointer;
}

/* make the details element only tall enough to show the 1-line summary */
.no-details details {
	height: 20px;
	overflow: hidden;
}

/* when details are "shown" set the height of the details element
tall enough to show its contents */
.no-details details.details-shown {
	height: 120px;
	@include transition-property(all);
	@include transition-duration(0.5s);
	@include transition-timing-function(ease-in);
}

/* do the arrow rotation stuff */
.no-details .arrow {
	float: left;
	display: inline;
	width: 13px;
	padding: 0;
	margin-right: 10px;
	@include transition-property(all);
	@include transition-duration(0.2s);
	@include transition-timing-function(ease-in);
}

.no-details .details-shown .arrow {
	@include rotate(90deg);
}

gistfile2.js

document.observe("dom:loaded", function() {
	/* check for details support in the current browser. If none,
	add the custom 'no-details' class. */
	if(!('open' in document.createElement('details'))) {
		document.documentElement.addClassName('no-details');
		
		var arrows = $A(document.getElementsByTagName("summary"));
		arrows.each(function(item) {
			item.on('click', function(event) {
				event.element().up("details").toggleClassName('details-shown');
			});
		});
	};
});