YUIDomCollapse is a script built upon the Yahoo User Interface library. It does the following:
- It scans the document for elements with a CSS class name of
- If the element is not a link it will
- hide the next element in the document
- create a new link inside the current element and
- alternately show and hide the next element when you activate the element (either by clicking with a mouse, or hitting enter on the keyboard after tabbing to it).
- If the element is a link it will show and hide the element the link's href points to. If that element does not exist it will show and hide the next element in the node tree instead.
Get the Code!
Accessibility and Usability
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.
Styling the effect
Once the elements have been converted to trigger elements they will get a CSS class called
When the element linked to the trigger is currently visible this class gets replaced with a class called
The linked elements are shown and hidden by adding or removing a CSS class called
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
Making it prettier
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.
Licencing and Use
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.
Whilst YUI is part of the name of this script, it is not part of the YUI and was not written by members of the YUI team. Do not contact them for bug reports.