TIP: simpler, css moo_modify_foreground.tpl

[Ben]

I am using moo_modify_foreground.tpl on a current project, but didn't like how it injected inline styling. This also negates the use of :hover and :focus styling. I came up with the following solution where these states are fully controlled by css: unselected, selected, hover/focus. Instead of injecting inline styling and requiring style changes to be made in the .tpl file, it simply injects an additional class for the selected toggler. Here is the complete code:

<script type="text/javascript">
<![CDATA[//><!--
window.addEvent('domready', function()
{
	new Accordion($$('div.toggler'), $$('div.accordion'), 
	{
		display: false,
		alwaysHide: true,
		opacity: true,

		onActive: function(toggler)
		{
			toggler.addClass('togglerSelected');
		},

		onBackground: function(toggler)
		{
			toggler.removeClass('togglerSelected');
		}
	});
});
//--><!]]>
</script>

You will need to create css selectors for:
.toggler
.togglerSelected
.toggler:hover, .toggler:focus
.togglerSelected:hover, .togglerSelected:focus

(The hover/focus are optional in both cases, but rounds things out nicely.)

[Captain]

Thanks for the tip Ben,
A link also would be nice when you are ready!

[Ben]

I've implemented it on a site I'm creating where the client does not want me link to the site until launch. I'll add a link here when I am able, though.