YUIDomCollapse is a script built upon the Yahoo User Interface library.

It can be used to turn any element into a show hide code.

So you can have a div and clicking on that it will show contents and again on clicking on that, it will hide the contents and that too with a smooth transition or animation, Giving a nice user experience to your website users.

The script is released under a Creative Commons Attribution 3.0 License

YUIDomCollapse - turn any element into a show and hide trigger
YUIDomCollapse - turn any element into a show and hide trigger

It does the following:

  • It scans the document for elements with a CSS class name of trigger.
  • 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.

Checkout the DEMO

DOWNLOAD