Add this to your Jquery
$( "#accordion" ).accordion({
heightStyle: "content"
});
Jsfiddle: http://jsfiddle.net/NDncE/74/
Question
I'm new to jquery and I made a wizard accordion
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?
La solution
Add this to your Jquery
$( "#accordion" ).accordion({
heightStyle: "content"
});
Jsfiddle: http://jsfiddle.net/NDncE/74/
Autres conseils
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
<div class="content">
<p>long height item</p>
</br>long height</br>
</br>long height</br>long height
<button class='next'>Next</button>
</div>