Is there a way to make all the panels in my jQuery tabs have the same width as the widest panel? I know that heightStyle:"auto" works for adjusting the height, but is there a similar option like widthStyle:"auto"?
I want to show you the current look compared to how I would like it to appear:
<div id="tabs" class="tab">
<ul>
<li><a href="#f1"><span>One</span></a></li>
<li><a href="#f2"><span>Two</span></a></li>
<li><a href="#f3"><span>Three</span></a></li>
</ul>
<div id="f1">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="f2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div id="f3">c<br>c<br>c<br>c<br>c<br></div>
</div>
<div style="clear:both">
</div>
<div id="tabs2" class="tab" >
<ul>
<li><a href="#f1"><span>One</span></a></li>
<li><a href="#f2"><span>Two</span></a></li>
<li><a href="#f3"><span>Three</span></a></li>
</ul>
<div id="f1">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="f2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div id="f3">c<br>c<br>c<br>c<br>c<br></div>
</div>
<script>
$("#tabs").tabs({
heightStyle: "auto",
}).css("float", "left");
$("#tabs2").tabs({
heightStyle: "auto",
}).css("float", "left").width(485);
</script>
http://jsfiddle.net/knj73r9o/2/
Instead of hardcoding the width, I am wondering if there is a way to automatically adjust the width based on the content. Is this possible?