jquery - wizard accordion - how to set different heights for each part -

i'm new jquery , made 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 problem height each content. when set height 1 content, of contents automatically set amount, while want have contents different heights. how can set different heights each content?

add jquery

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

jsfiddle: http://jsfiddle.net/ndnce/74/

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