• Register
  • Log In
  • Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • API Docs
    • Environments
    • Tutorials
  • Community
    • Gallery
    • Blog
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • Shifter »
    • Yogi »
    • YUI 2
    • YUI Doc »
    • YUI Test
    • YUI Website
    • YUI Compressor »
    • YUI Builder »
    • YUI PHP Loader
    • Grid Builder »
    • Skin Builder »
  • YUI
  • >
  • Community
  • >
  • Gallery

Gallery

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • Yogi Documentation
  • Shifter Documentation
  • Developer Guide
  • Module Setup

Tag Cloud

Context Navigation

    YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

    Accordion (Horizontal/Vertical) (gallery-accordion-horiz-vert) on cdn

    Last Updated: 04/7/13
    + 3 -

    John Lindal

    YUI Contributor

    See 50 more by this user.

    Created: 12/4/09
    Last CDN Push: 01/30/13
    Build Tag: gallery-2013.01.30-21-00
    Project: YUI 3
    License: YUI BSD
    YUI Version: 3.5.1
    Free for use.

    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.

    • Tags:
    • accordion
    • jafl
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    A simple example of creating an accordion from content and then attaching an open/close handler to each section title.

    Code Sample

    <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);
    	});
    });

    Forum Posts

    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