I inadvertently posted to the wrong group initially. Here's a recap of what's been said:
================================= I've got a page I'm working on here: http://www.moxdom.com/the-goods/ ... that has an accordion with tabs inside of each accordion slice. The problem that I've can't figure out is why the height is being set to the combined height of all 3 tabs. (height: 1175px) Is there some CSS/jQuery I can override that will change this, and make it the height of the individual tabs? Also, is this an accordion setting, or a tabs setting? Note that I've temporarily added this to my css that partially works .widget { height: 450px !important; } where widget is my main div... But is there a better way? =========================================== Kevin Dalman Responded: Hi Matt, You are asking this question in the wrong forum. This is the group for UI Layout. Try the UI group... http://groups.google.com/group/jquery-ui/ However, here are some things to check for that might be related to your issue... 1) Pay attention to the *order* that you initialize the widgets. Remember that the 'tabs' originally start out as 3 divs 'stacked' one above the other - until the tabs are initialized. Therefore is you init the Accordion BEFORE the tabs, then when the accordion is created, *all 3 tabs are still stacked vertically*. 2) Perhaps you should not use an accordion at all! There is no fixed-height that you need to fit - all you really need is 'expanding sections'. This would allow the panels tp size-to-fit the content *perfectly* every time. So there would be no need to worry about setting a size or what order you init things in - it would always be a perfect fit. There are plenty of examples and discussion about when to use an accordion and when to use sliding panels instead. Ask in the UI forum or check the UI Accordion documentation. You can decide whether you want to allow multiple panels to be opened at the same time, or just one at a time. The code for this is extremely simply - just a couple of lines. If you want the same 'look' as the accordion, just apply the correct UI Framework classes - this is all the Accordion widget does. Then you can still use ThemeRoller to style your page. If you need more info on anything I've said here, ask in the UI forum. Good luck. /Kevin ============= And here's where the saga continues.... I think that order is my issue.... here's what I have (simplified): You can see the whole enchilada here: http://www.moxdom.com/the-goods/ <div id="accordion"> <h3><a href="#">Social Media Packages</a></h3> <div id="tabs1" class="widget"> <ul class="tabnav"> <li><a href="#tabs1-1">Starter Package</a></li> <li><a href="#tabs1-2">Business Package</a></li> <li><a href="#tabs1-3">Entrepreneur Package</a></li> </ul> <div id="tabs1-1" class="tabdiv"> <ul class="topul"> <li class="topli">Facebook: </li> <ul class="inul"> <li class="inli">Create, Optimimize & Maintain Your Facebook Fanpage </li> <li class="inli">Spend 2 Hours monthly engaging your fans </li> </ul><!-- End inul --> </ul><!-- End topul --> </div> <!-- End Tabs1-1 --> </div> <!-- End Tabs1 --> </div> <!-- End accordion --> Any thoughts on getting the height to auto adjust? -- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.
