John Lindal![]()
Unlike other accordions, this widget only provides containers and animation. Specifically, it does not enforce any particular markup structure for the titles. This provides the flexibility to open/close sections either by clicking the title bar or an element inside the title bar.
An accordion can be constructed from existing markup or from strings containing HTML. Existing markup can be provided either by setting contentBox or by specifying CSS selectors. See the titles and sections attributes.
When constructing from existing markup via contentBox, use an unordered list (ul). Each item must contain two div's. The first one is used as the section title, and the second one is used as the section content.
A simple example of creating an accordion from content and then attaching an open/close handler to each section title.
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>YUI({
//Last Gallery Build of this module
gallery: 'gallery-2013.01.30-21-00'
}).use('gallery-accordion-horiz-vert', function(Y)
{
function onTitleClicked(e, a)
{
var t = e.target;
var i = a.findSection(e.target);
if (i !== false)
{
a.toggleSection(i);
}
}
var accordion = new Y.Accordion(
{
boundingBox: '#my-vert-accordion',
titles:
[
'<div class="my-title-vert"><a href="javascript:void(0);">#1</a></div>',
'<div class="my-title-vert"><a href="javascript:void(0);">#2</a></div>',
'<div class="my-title-vert"><a href="javascript:void(0);">#3</a></div>'
],
sections:
[
'<p>testing</p>',
'<p>testing testing</p>',
'<p>testing</p><p>testing</p><p>testing</p>'
]
});
accordion.after('render', function()
{
Y.on('click', onTitleClicked, '#my-vert-accordion .my-title-vert', null, accordion);
});
});| Subject | Author | Date |
|---|---|---|
| Missing CSS rule | Jeff Pihach | 01/19/11 |
| Re: Missing CSS rule | John Lindal | 01/19/11 |
| Re: Missing CSS rule | Jeff Pihach | 01/19/11 |
| Re: Missing CSS rule | John Lindal | 01/19/11 |
| Re: Missing CSS rule | John Lindal | 01/20/11 |
| Re: Missing CSS rule | Jeff Pihach | 01/21/11 |
| Re: Missing CSS rule | John Lindal | 01/21/11 |
| Re: Missing CSS rule | John Lindal | 01/21/11 |
| Accordian does not work properly with yui3 chart | Mayank Gupta | 08/24/11 |
| Re: Accordian does not work properly with yui3 chart | Mayank Gupta | 08/25/11 |
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info