plugin: Accordion

custom.js

markup
------
<div id="accordion">     
    <h2> <span>1</span> Checkout Method</h2>     
<div class="content">         
    ....     
</div>     
    
<h2> <span>2</span> Billing Information</h2>     
<div class="content">         
    ....     
</div>
    
<h2> <span>3</span> Shipping Information</h2>     
    <div class="content">         
    ....     
</div>

<h2> <span>4</span> Shipping Method</h2>     
    <div class="content">         
    ....     
</div>

<h2> <span>5</span> Payment Information</h2>     
    <div class="content">         
    ....     
</div>

<h2> <span>6</span> Order Review</h2>     
    <div class="content">         
    ....     
</div>
    
</div>

css
---
#accordion {  width: 99%;  margin:10px auto; } 
#accordion h2 {  cursor:pointer;  margin:0 0 1px 0;  padding:5px 0 5px 40px ;  background: #d5f4f7;  color:#343718;
font: normal 16px Arial, sans-serif; border: 1px solid #96d4da; position: relative;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#accordion .content {  background: transparent;  padding:10px 15px;  color:black;  height:120px;  } 
#accordion h2.activepenl {  background: #d5f4f7;    }
#accordion h2.activepenl span { background: #292908; color: #d5f4f7; }

#accordion h2 span { position: absolute; left: -1px; top: -1px; border-right: 1px solid #96d4da; padding: 6px 10px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}

jQuery
------
$(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('activepenl').next().slideDown('slow');
    $('#accordion h2').click(function() {
        if ($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('activepenl').next().slideUp('slow');
            $(this).toggleClass('activepenl').next().slideDown('slow');
        }
    });
});