<div id="st-accordion" class="st-accordion">
    <ul>
        <li>
            <a href="#">
                Item Title
                <span class="st-arrow">Open or Close</span>
            </a>
            <div class="st-content">
                <p>Some content</p>
            </div>
        </li>
        <li> ... </li>
    </ul>
</div>

.st-accordion{
    width:100%;
    min-width:270px;
    margin: 0 auto;
}

.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
}

.st-accordion ul li:first-child{
    border-top:none;
}

.st-accordion ul li > a{
    font-family: 'Josefin Slab',Georgia, serif;
    text-shadow: 1px 1px 1px #fff;
    font-size: 46px;
    display: block;
    position: relative;
    line-height: 100px;
    outline:none;
    -webkit-transition:  color 0.2s ease-in-out;
    -moz-transition:  color 0.2s ease-in-out;
    -o-transition:  color 0.2s ease-in-out;
    -ms-transition:  color 0.2s ease-in-out;
    transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
    color: #1693eb;
}

.st-accordion ul li > a span{
    background: transparent url(../images/down.png) no-repeat center center;
    text-indent:-9000px;
    width: 26px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: -26px;
    margin-top: -7px;
    opacity:0;
    -webkit-transition:  all 0.2s ease-in-out;
    -moz-transition:  all 0.2s ease-in-out;
    -o-transition:  all 0.2s ease-in-out;
    -ms-transition:  all 0.2s ease-in-out;
    transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover span{
    opacity:1;
    right: 10px;
}

.st-accordion ul li.st-open > a{
    color: #1693eb;
}
.st-accordion ul li.st-open > a span{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    transform:rotate(180deg);
    right:10px;
    opacity:1;
}

.st-content{
    padding: 5px 0px 30px 0px;
}
.st-content p{
    font-size:  16px;
    font-family:  Georgia, serif;
    font-style: italic;
    line-height:  28px;
    padding: 0px 4px 15px 4px;
}
.st-content img{
    width:125px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}

@media screen and (max-width: 320px){
    .st-accordion ul li > a{
        font-size:36px;
    }
}

$.Accordion.defaults        = {
    // index of opened item. -1 means all are closed by default.
    open            : -1,
    // if set to true, only one item can be opened. 
    // Once one item is opened, any other that is 
    // opened will be closed first
    oneOpenedItem   : false,
    // speed of the open / close item animation
    speed           : 600,
    // easing of the open / close item animation
    easing          : 'easeInOutExpo',
    // speed of the scroll to action animation
    scrollSpeed     : 900,
    // easing of the scroll to action animation
    scrollEasing    : 'easeInOutExpo'
};

_init               : function( options ) {

        this.options        = $.extend( true, {}, $.Accordion.defaults, options );

        // validate options
        this._validate();

        // current is the index of the opened item
        this.current        = this.options.open;

        // hide the contents so we can fade it in afterwards
        this.$items.find('div.st-content').hide();

        // save original height and top of each item 
        this._saveDimValues();

        // if we want a default opened item...
        if( this.current != -1 )
            this._toggleItem( this.$items.eq( this.current ) );

        // initialize the events
        this._initEvents();
    },

_toggleItem         : function( $item ) {

    var $content = $item.find('div.st-content');

    ( $item.hasClass( 'st-open' ) ) 

        ? ( this.current = -1, $content.stop(true, true).fadeOut( this.options.speed ), $item.removeClass( 'st-open' ).stop().animate({
            height  : $item.data( 'originalHeight' )
        }, this.options.speed, this.options.easing ) )

        : ( this.current = $item.index(), $content.stop(true, true).fadeIn( this.options.speed ), $item.addClass( 'st-open' ).stop().animate({
            height  : $item.data( 'originalHeight' ) + $content.outerHeight( true )
        }, this.options.speed, this.options.easing ), this._scroll( this ) )
},

_initEvents         : function() {

    var instance    = this;

    // open / close item
    this.$items.find('a:first').bind('click.accordion', function( event ) {

        var $item           = $(this).parent();

        // close any opened item if oneOpenedItem is true
        if( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ) {

            instance._toggleItem( instance.$items.eq( instance.current ) );

        }

        // open / close item
        instance._toggleItem( $item );

        return false;

    });

    $(window).bind('smartresize.accordion', function( event ) {

        // reset original item values
        instance._saveDimValues();

        // reset the content's height of any item that is currently opened
        instance.$el.find('li.st-open').each( function() {

            var $this   = $(this);
            $this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );

        });

        // scroll to current
        if( instance._isOpened() )
        instance._scroll();

    });
},