I'm experimenting with a new design for my site. I'm using jQuery UI and have a simple tab setup in place.
The JavaScript for this has it set up where when you mouse over one of the tabs, the content div will shrink upward until it disappears then the selected div will appear.
What I would like to do is make it so that when you mouse over one of the tabs, instead of the content simply appearing, it expands like an accordion, and nearby tabs shrink as needed. I had something similar to this before, however the text in the shrinking tab would constantly shift position until it disappeared, which was not aesthetically pleasing. Can anyone help me with a way of getting this desired affect?
Code:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Foo</a></li>
<li><a href="#tabs-2">Bar</a></li>
<li><a href="#tabs-3">Baz</a></li>
<li><a href="#tabs-4">Blah</a></li>
</ul>
<div id="tabs-1">
Foo content
</div>
<div id="tabs-2">
Bar content
</div>
<div id="tabs-3">
Baz content
</div>
<div id="tabs-4">
Blah content
</div>
</div>The JavaScript for this has it set up where when you mouse over one of the tabs, the content div will shrink upward until it disappears then the selected div will appear.
Code:
$(function(){
$("#tabs").tabs({
event: "mouseover",
fx: { height: 'toggle', duration: 'fast' }
});
});What I would like to do is make it so that when you mouse over one of the tabs, instead of the content simply appearing, it expands like an accordion, and nearby tabs shrink as needed. I had something similar to this before, however the text in the shrinking tab would constantly shift position until it disappeared, which was not aesthetically pleasing. Can anyone help me with a way of getting this desired affect?
Last edited: