Bubbling Library > Examples

Vertical Accordion Menu (open on click)

Configuration: Vertical, Manually, Persistent, slow

 

Accessories

iPhone accessories
Apple accessories help you get the most out of your iPhone. Find out more

 

Photos

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

 

360 View

iPhone with earbuds
Want to take iPhone for a spin? Watch this

 

TV Ads

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

Configuration: Vertical, Persistent, fadeIn/Out

Accessories

iPhone accessories
Apple accessories help you get the most out of your iPhone. Find out more

 

Photos

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

 

360 View

iPhone with earbuds
Want to take iPhone for a spin? Watch this

 

TV Ads

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

 


Javascripts:

<script src="http://yui.yahooapis.com/2.5.1/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 vertical persistent slow">
<div class="yui-cms-item selected">
<a href="#" class="accordionToggleItem" title="click to expand">&nbsp;</a>
<div class="bd" style="width: auto;">
<div class="fixed">
</div>
</div>
</div>
<div class="yui-cms-item">
<a href="#" class="accordionToggleItem" title="click to expand">&nbsp;</a>
<div class="bd">
<div class="fixed">
</div>
</div>
</div>
</div>

Dressing (CSS Code):

.myAccordion {
clear: both;
padding: 5px;
}
.myAccordion .yui-cms-accordion .yui-cms-item {
border: 1px solid #cccccc;
float: left;
display: inline;
background-color: #fff;
}
.myAccordion .yui-cms-accordion .yui-cms-item.selected {
width: auto;
}
.myAccordion .yui-cms-accordion .yui-cms-item .accordionToggleItem {
width: 17px;
height: 17px;
display: block;
background: url(../images/accordion.gif) no-repeat 0px -200px;
text-decoration: none;
}
.myAccordion .yui-cms-accordion .yui-cms-item.selected .accordionToggleItem {
background: url(../images/accordion.gif) no-repeat 0px -300px;
opacity: 0.2;
}
.myAccordion .yui-cms-accordion .yui-cms-item .bd {
width: 1px; /* Hack: vertical accordion with width=0 will generate malfunctions in opera and safari */
overflow: hidden;
background-color: #fff;
}
/* forcing the expandable area to a fixed width and height, to keep the container size */
.myAccordion .yui-cms-accordion .yui-cms-item .bd .fixed {
overflow: hidden;
width: 200px;
height: 250px;
padding: 5px;
}