Vertical Accordion Menu (open on click)

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