巫师手风琴-如何为每个部分设置不同的高度

我是jquery的新手,我做了一个巫师手风琴

jsFiddle

HTML格式:

    <div id="accordion">
    <h3><a href="#">Step 1</a></h3>
        <div class="content">
                <p> test
                </p>
            <button class='next'>
                Next
            </button>
         </div>
     <h3><a href="#">Step 2</a></h3>
            <div class="content">
                 <p>   test
                </p>
                <button class='previous'>
                    Previous
                </button>
                <button class='next'>
                    Next
                </button>
            </div>
    <h3><a href="#">Step 3</a></h3>
        <div class="content">
            <p> test
            </p>
            <button class='previous'>
                Previous
            </button>
        </div>

JQuery:

jQuery(document).ready(function(){
$('#accordion').accordion();
$('#accordion button').click(function(e) {
    e.preventDefault();
    var delta = ($(this).is('.next') ? 1 : -1);
    $('#accordion').accordion('option', 'active', ( $('#accordion').accordion('option','active') + delta  ));
});

});

我对每个内容的高度都有问题。 当我为一个内容设置高度时,所有内容都会自动设置为该高度, 而我想要不同高度的内容。 如何为每个内容设置不同的高度?