Finally found a solution.. really quite simple. Hate I ended up spending all this time on it!!
Thanks to this website: http://jsbin.com/icebe Which has an example of exactly what I wanted. Must use the collapsible: true, autoHeight: false; on any instances of the accordion widget for them to correctly autoexpand for content when a different Tab is selected. Thanks for the help! On Dec 9, 9:13 am, JSiebe <jordansi...@gmail.com> wrote: > Steve, > > Thank you for the reply, I appreciate any advice! > > I tried your suggestion, but still couldn't get anywhere. Here is the > JQuery code I am using; > > <script type="text/javascript"> > $(function () { > > $('#months').tabs(); > > $('#OfficeTab1').accordion( > { > fillSpace: 'true', > clearStyle: 'true' > }); > > $("#OfficeTab2").accordion( > { > fillSpace: 'true', > clearStyle: 'true' > }); > }); > </script> > > HTML > > <div id="months"> > <ul> > <li><a href="#November"><span>November</span></a></ > li> > <li><a href="#October"><span>October</span></a></ > li> > </ul> > > <div id="November"> > <div id="OfficeTab1"> > <h3><a href="#">Section1</a></h3> > <div> > <label class="laHeader">LA Header</ > label> > <br /> > JSiebe > <br /><br /> > > <label class="saHeader">SA Header</ > label> > <br /> > JSiebe > <br /><br /> > </div> > > <h3><a href="#">Section2</a></h3> > <div></div> > > <h3><a href="#">Section3</a></h3> > <div></div> > > <h3><a href="#">Section4</a></h3> > <div></div> > </div> > </div> > > <div id="October"> > <div id="OfficeTab2"> > <h3><a href="#">Section1</a></h3> > <div> > <label class="laHeader">LA Header</ > label> > <br /> > JSiebe > <br /><br /> > > <label class="saHeader">SA Header</ > label> > <br /> > JSiebe > <br /><br /> > </div> > > <h3><a href="#">Section2</a></h3> > <div>Test Test <br /><br />Test Test<br /><br / > > >Test<br /></div> > > <h3><a href="#">Section3</a></h3> > <div></div> > > <h3><a href="#">Section4</a></h3> > <div></div> > </div> > </div> > </div> > > OfficeTab2 is the pesky bugger, and any subsequent Accordion widget > within tab2, tab3, tab4, etc. Only Tab1 works properly. I have tried > adding your suggestion before the closing div tag in Section1 of > OfficeTab2. Also tried adding it before the accordion container, and > parent container. Have tried adding/removing options for the > accordion in javascript, but no luck, same results. > > Have any more sugggestions? Thanks again for your input. > > JSiebe > > > > > Add that right before the closing div of your column div should do the > > trick. (or wherever the end of the container that requires resizing > > is) > > > On 12月8日, 下午12時08分, JSiebe <jordansi...@gmail.com> wrote: > > > > Howdy! > > > > I am having an issue with the autoHeight option in accordion instances > > > within a Tab instance. > > > > My first tab loads it's accordion instance fine and auto expands the > > > height to match my content just fine. When I switch to tab 2, or 3, > > > etc. The accordions in those tabs do not auto expand to match height > > > of content. I have tried using clearStyle and fillSpace options, but > > > can't seem to get those accordions in tabs 1, 2, 3 to auto expand the > > > first section in the accordion. > > > > Any ideas what I am doing wrong? Do I need to add an activate, 0 for > > > the click event of the tabs or something? If so, I'm not real sure > > > how to go about writing the code for the click events to do that.. > > > anyone point me in the right direction? > > > > Sorry if that isn't clear enough, if needed, I can post my code for > > > anyone to look at. > > > > Thanks for any advice/suggestions. > > > > -- JSiebe -- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery...@googlegroups.com. To unsubscribe from this group, send email to jquery-ui+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.
