YUIDomCollapse - turn any element into a show and hide trigger

The script is built to create accessible and usable interfaces.

• Instead of adding click handlers to elements that cannot be reached with a keyboard it will always create links around the HTML content of the element.
• When there is an ID on the following element this link will point to that ID, otherwise it will create a new ID on the element and points the link to that one.
• Instead of overriding the normal browser behaviour, the script will allow the links to be followed, create a hash on the URL and move the focus of the document to the target element. This allows users to bookmark the current open section and ensures support for assistive technology (this option is turned off when you choose the fancy version of the script). When the script initializes it checks if there is a hash on the URL and will not hide this section.

Once the elements have been converted to trigger elements they will get a CSS class called parent. When the element linked to the trigger is currently visible this class gets replaced with a class called open. The linked elements are shown and hidden by adding or removing a CSS class called hide. You can change all of these CSS class names in the JavaScript include yuidomcollapse-css.js.

All you need to do is to embed the necessary YUI components and the script in the head of your HTML document:

<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js"></script> 
<script src="yuidomcollapse.js"></script> 
<script src="yuidomcollapse-css.js"></script>

Once this is done, every element with a class of trigger will become a trigger to collapse or expand the following or the linked element

If you don't simply want to show and hide the linked elements but make them fade in and out smoothly, add the YUI animation component and the "fancy" version in addition to the standard files.

<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js"></script> 
<script src="yuidomcollapse.js"></script> 
<script src="yuidomcollapse-css.js"></script>
<script src="yuidomcollapse-fancy.js"></script> 

Be aware of some nasty Internet Explorer bug, which shows the text as bold during the fading process unless you set a background colour to the element.

The script is released under a Creative Commons Attribution 3.0 License which means you can use and modify it even in commercial products as long as you attribute the original script to me and flag up the changes you have done to it (I don't want to have to answer bug-reports caused by your modifcations). If you want to use the script commercially and you don't want to attribute me, please email me and we can talk shop about terms, conditions and pricing.