jQuery Accordion

HTML

<script src="http://www.madeincima.it/download/samples/jquery/easyAccordion/scripts/jquery.easyAccordion.js"></script>
<div id="accordion-2">
    <dl>
        <dt>
            Towing</dt>
        <dd>
            <h2>
                Towing</h2>
            <img src="http://www.boatingontario.ca/images/acc-image01.jpg" />
            <p>
                When you choose your membership level, Basic or Family, towing is included! Our highly trained service team will coordinate the response and tow you and your vessel safely to the closest safe port.</p>
        </dd>
        <dt>
            Mechanical Breakdown</dt>
        <dd>
            <h2>
                Mechanical Breakdown</h2>
            <img src="http://www.boatingontario.ca/images/acc-image02.jpg" />
            <p>
                If you experience a mechanical breakdown such as an electrical problem, faulty sparkplugs, engine failure our highly trained service team will send a mechanic to assist on-the-water or tow you and your vessel to the closest safe port.</p>
        </dd>
        <dt>
            Soft Ungrounding</dt>
        <dd>
            <h2>
                Soft Ungrounding</h2>
            <img src="http://www.boatingontario.ca/images/acc-image06.jpg" />
            <p>
                If you run aground on a shoal or sandbar, provided there is no physical damage to the boat, our highly trained service team will coordinate the response and tow you and your vessel safely to the closest safe port.</p>
        </dd>
        <dt>
            Fuel Delivery</dt>
        <dd>
            <h2>
                Fuel Delivery</h2>
            <img src="http://www.boatingontario.ca/images/acc-image04.jpg" />
            <p>
                Should you unexpectedly run out of fuel on the water, our highly trained service team will coordinate the free delivery of fuel options to your boat. Fuel options include 25 litres for $40 or 50 litres for $80.</p>
        </dd>
    </dl>
</div>

CSS

/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES edit for ie */
.easy-accordion {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.easy-accordion dt,
.easy-accordion dd {
    margin: 0;
    padding: 0;
}
.easy-accordion dt,
.easy-accordion dd { position: absolute }
.easy-accordion dt {
    margin-bottom: 0;
    nowhitespace: afterproperty;
    margin-left: 0;
    z-index: 5;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
 
    nowhitespace: afterproperty;
    -moz-transform-origin: 20px 0px;
    -o-transform-origin: center 174px;
   

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.easy-accordion dd {
    z-index: 1;
    opacity: 0;
    overflow: hidden;
}
.easy-accordion dd.active { opacity: 1 }
.easy-accordion dd.no-more-active {
    z-index: 2;
    opacity: 1;
}
.easy-accordion dd.active { z-index: 3 }
.easy-accordion dd.plus { z-index: 4 }
.easy-accordion .slide-number {
    position: absolute;
    nowhitespace: afterproperty;
    bottom: 0;
    left: 10px;
    font-weight: normal;
    font-size: 1.1em;
    cursor: pointer;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);;
}
/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */
#accordion-2 p { 
    line-height: 120%; 
    color: #333; 
    font-family: Arial, Helvetica, sans-serif;
}

#accordion-2 {
    width: 650px;
    height: 345px;
    padding: 30px;
    background: #fff;
}
#accordion-2 h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}
#accordion-2 dl {
    width: 650px;
    height: 345px;
}
#accordion-2 dt {
    height: 56px;
   ...

JavaScript

$('#accordion-2').easyAccordion();