Gallery

Modules

Documentation

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.

Simple Accordion (gallery-simple-accordion) on cdn

Last Updated: 08/27/12

+ 0 -

alejandro soto gonzalez

YUI Contributor

See 2 more by this user.

Created: 08/27/12
Last CDN Push: 09/26/12
Build Tag: gallery-2012.09.26-20-36
Project: YUI 3
License: YUI BSD
YUI Version: 3.6.0
Free for use.

This module gives the chance to use a defined markup, using a list to create a simple accordion

Usage

Files



<link rel="stylesheet" href="./simple-accordion.css" type="text/css" charset="utf-8"></link>

<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script> 

<script src="./simple-accordion.js"></script>

Markup



<ul class="one-accordion">

    <li class="accordion-item">

        <a href="#" class="accordion-item-link">Departments</a>

        <ul class="accordion-item-content">

            <li>item1</li>

            <li>item2</li>

            <li>item3</li>

            <li>item4</li>

            <li>item5</li>

        </ul>

    </li>

    <li class="accordion-item">

        <a href="#" class="accordion-item-link">News</a>

        <ul class="accordion-item-content">

            <li>item1</li>

        </ul>

    </li>

    <li class="accordion-item">

        <a href="#" class="accordion-item-link">Forms</a>

    </li>

    <li class="accordion-item">

        <a href="#" class="accordion-item-link">Applications</a>

        <ul class="accordion-item-content">

            <li>item1</li>

            <li>item2</li>

            <li>item3</li>

            <li>item4</li>

        </ul>

    </li>

    <li class="accordion-item">

        <a href="#" class="accordion-item-link">Services</a>

        <ul class="accordion-item-content">

            <li>item1</li>

            <li>item2</li>

        </ul>

    </li>

</ul>

Instantiation



<script type="text/javascript" charset="utf-8">

YUI().use('simple-accordion', 'node', function(Y) {

    Y.on('domready', function() {

         var simpleAccordion = new Y.SimpleAccordion({

              mainNode: Y.one('.one-accordion')

         });                

    });});

</script>

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

Code Sample

<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.09.26-20-36'
}).use('simple-accordion', 'node', function(Y) {
    Y.on('domready', function() {
         var simpleAccordion = new Y.SimpleAccordion({
             mainNode: Y.one('.one-accordion')
         });				
    });
 
 
});