Response title
This is preview!
Accordion heightStyle
in Using jQuery UI
•
9 years ago
Hi
I am trying to implement the accordion in jquery-ui-1.10.3 and I require the height of each panel to match its respective content.
However, using the heightStyle option, as seen below, has no effect on the height of the panels.
In fact, substituting either of the others possible values ('auto', 'fill') to the heightStyle option has no effect either - all panels appear to take their height from the first panel.
Can anyone help me?
Peter
<style>
$(document).ready(function() {
$('#accordion').accordion({header: 'h3'});
$('#accordion').accordion({collapsible: true});
$('#accordion').accordion({heightStyle: 'content'});
});
</style>
<body>
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Content</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Content</p>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Content</p>
</div>
</div>
</body>
I am trying to implement the accordion in jquery-ui-1.10.3 and I require the height of each panel to match its respective content.
However, using the heightStyle option, as seen below, has no effect on the height of the panels.
In fact, substituting either of the others possible values ('auto', 'fill') to the heightStyle option has no effect either - all panels appear to take their height from the first panel.
Can anyone help me?
Peter
<style>
$(document).ready(function() {
$('#accordion').accordion({header: 'h3'});
$('#accordion').accordion({collapsible: true});
$('#accordion').accordion({heightStyle: 'content'});
});
</style>
<body>
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Content</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Content</p>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Content</p>
</div>
</div>
</body>
1