Bubbling Library > Examples

Accordion Control - Expandable items (open on click)

Configuration: multiple, fadeIn/Out

Accessories

Apple accessories help you. Find out more

Photos

No matter how you look at it, the iPhone design is incredible. View photos

View

Want to take iPhone for a spin? Watch this

TV Ads

iPhone shows what it can do in these TV commercials. View video

Configuration: multiple, slow, bounceOut

Accessories

Apple accessories help you. Find out more

Photos

No matter how you look at it, the iPhone design is incredible. View photos

View

Want to take iPhone for a spin? Watch this

TV Ads

iPhone shows what it can do in these TV commercials. View video

Javascripts:

<script src="http://yui.yahooapis.com/2.5.0/build/utilities/utilities.js"></script>
<script src="/yui-cms/build/bubbling/bubbling.js"></script>
<script src="/yui-cms/build/accordion/accordion.js"></script>

Base HTML Markup:

<div class="yui-cms-accordion multiple fade">
    <div class="yui-cms-item yui-panel">
        <div class="hd">Label 1</div>
        <div class="bd">
          <div class="fixed">
          </div>
        </div>
        <div class="actions">
          <a href="#" class="accordionToggleItem">&nbsp;</a>
        </div>
    </div>
    <div class="yui-cms-item yui-panel">
        <div class="hd">Label 2</div>
        <div class="bd">
          <div class="fixed">
          </div>
        </div>
        <div class="actions">
          <a href="#" class="accordionToggleItem">&nbsp;</a>
        </div>
    </div>
</div>

Dressing (CSS Code):

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://js.bubbling-library.com/1.5.0/build/accordion/assets/accordion.css" />
<style type="text/css">
.myAccordion {
    float: left;
    margin-right: 50px;
}
    .myAccordion .yui-cms-accordion .yui-cms-item {
        width: 200px;
    }
</style>