wizard accordion - how to set different heights for each part

Question

I'm new to jquery and I made a wizard accordion

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

});

I'm having a problem with the height for each content. When I set a height for one content, all of the contents are automatically set to that amount, While I want to have contents with different heights. How can I set different heights for each content?

Answer 1

Add this to your Jquery

   $( "#accordion" ).accordion({
      heightStyle: "content"
    });

Jsfiddle: http://jsfiddle.net/NDncE/74/

(see http://jqueryui.com/accordion/#no-auto-height)

Answer 2

your example not need to set fixed height for each item you most be append your item in per item then automatically height set with content for each item in accordion i ve change your example you can see this

new fiddle

<div class="content">
    <p>long height item</p>
    </br>long height</br>
    </br>long height</br>long height
    <button class='next'>Next</button>
</div>