Downloads
Free Support
Donations
Contact Us
Site Map
RSS
See the examples in a new window:
/themes/bubbling/jscripts/yui-cms/examples/accordion/index.html
Loading, please wait...
This announcement will hide in 60 seconds
More Information
New Examples
Latest Releases
Accordion Manager
This YUI Widget will allow you to create expandable and collapsible areas using the correct HTML and CSS, but without writing a single line of javascript code. (new)
Loading Mask
The Loading Mask widget will hide all the page's content until the onLoad's event, which mean that the website will not be displayed until the current page be fully loaded. Also this widget can be used in conjunction with the YUI Connection Manager to block the actions over the page until the AJAX's request finish. (new)
Hot Components
Accordion Manager
Create expandable and collapsible areas using the correct HTML and CSS, but without writing a single line of javascript code. (released)
Bubbling Core
The bubbling core now include a generic communication mechanism for widget2widget, widget2browser and widget2server messages. (updated lately)
Tooltip Manager
Improved, now using the YUI Overlay instead YUI Tooltips, also introduce a new feature, "content onDemand" using the YUI connection manager. (updated lately)
Coming Soon
Bubbling Library for YUI 3.x
A new version of the Bubbling Library compatible with the NEW YUI 3.x. (comming soon)
Recommended Reading
Using the YUI TabView Control with the Dispatcher Plugin
YUI Dispatcher Plugin and how to use it along with the YUI TabView to load on-demand content using the YUI Connection Manager.
The Bubbling Technique & Custom Event, YUI’s Secret Weapon
In this article I’ll share my experiences in the event-driven programming within the web browser and show how the Bubbling Library, combined with YUI’s Custom Event capabilities, can create an unobtrusive behavioral layer suitable for powerful web applications.
Event-Driven Web Application Design
I recommend you to read carefully the Christian Heilmann's paper, where he wrote about how to plan an Event-Driven application, and how this technique will become the future of the web application as a result of an evolutive process.
A JavaScript Module Pattern
Eric Miraglia's detailed explanation of how to use the closures and specifically the module pattern (singlenton) as a flexible and multi-funcional structure...
Related Links
Yahoo! UI Library (YUI)
YUI Official Website at the Yahoo! Developer Network.
YUI Official Forum
Get help and share your knowledges thru the frenetic javascript mailing list at Yahoo! Developer Network...
Motionbox EventHandler
For those who use propotype instead YUI, here is an implementation of the bubbling core routine for Propotype, I never tested it, but it's seen like a good implementation.
icons
the icons of the nested menu inherits it's parents state. you should add a class for "deselected".
RE: icons
Hi stefan, thanks for the feedbacks, we will solve this issue with the next release 2.0.0.
Accordion
Too bad, the Accordion manager does not work in IE7 and is therefore a show stopper for us....
Another 'Firefox only" nice but useless piece of code.
Please fix it.
Thanks
Jacques
RE: Accordion
Could you please send me the specific example that didn't works? also your IE 7 version, I mean the exact version. All the component were tested on IE 6/7, and only the vertical accordion have some issues, but anyway, you send us the link, and we will fix it for you... The accordion plugin have a configuration argument, called fixIE, which is a class, that should solve all the problems with IE.
Accordian and IE
I seem to have 1 issue with IE. I have a collapsable/expandable item that I dynamically insert other divs into for menu items.
Bookmarks
The code above is for the item collapsable/expandable container and I dynamically insert divs into "bookmarkPane". An example div is:
RE: Accordian and IE
Hey Ryan,
There is an example to integrate the accordion with the YUI Connection Manager to load the content of the element when it get expanded:
http://bubbling-library.com/sandbox/accordion/ajax.html
But anyway, here is the code:
YAHOO.util.Dom.setStyle(el,"height",el.scrollHeight+"px");
and "el" is a reference to the "bd" element (which is the expandable / collapsible element).
P.S.: let me know if you need more help with this.