Hi,
I’m trying to nest 7 tab sets in an accordion representing each day of the week. I’ve tried all kinds of fixes, but no matter what I do, the results are inconsistent. It’s easier to see than explain now: http://www.ehydrant.com/trouble/accordion-custom2.htm
Can anyone have a look and give me some guidance. I am an amateur jQuery user.
Thanks guys!
The problem looks like it might actually be with your HTML. I saved a copy of the page locally, ran it through the W3C validator and it had a bunch of unclosed tags and other problems. After cleaning up the markup it appears to behave as intended.
Really? Thanks I’ll try and sort that out. Any hints as to where to look for problems?
Just copy/paste your code into here http://validator.w3.org/#validate_by_input and fix all the errors it gives you.
The HTML isn’t causing the problem.
When cut back to only the H2 and a single piece of content inside each DIV, the accordion still screws up in the same manner.
It is the accordion script that is causing the problem.
Replace it with the following and it will work well.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<!-- activate tabs with JavaScript -->
<script>
$(function() {
$("#accordion").accordion({ clearStyle: true });
$(".css-tabs").tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
});
Thanks to both of you. I’ve cleaned up the HTML and yes pmw57, that didn’t fix it. I pasted your code in and there’s still trouble - maybe I’ve done something wrong.
When you first click a day of the week, it doesn’t slide open, just snaps into place. After that, clicking days slides them open. Then none of the Ajax appears in the tabs, it just loads like a regular linked page.
Any ideas? 
New demo page at: http://ehydrant.com/trouble//accordion-custom3.htm
That other script that you left in below the script I provided you, is causing the tabs trouble.
Concerning which one is open, the jQuery accordion plugin page gives you all the information.
For example, you can use the active property to specify which one starts as being active. For example:
$("#accordion").accordion({ clearStyle: true, active: 0 });
Thanks pmw57. I have the other script out (had tried that before) but the problems I described are still there…
I notice that the jQuery tabs plugin page is having trouble with its own demo not working, so there’s an issue at hand with loading the jQuery UI library as a while.
Try downloading your own custom jQuery UI package and run the script locally.
Maybe I’m missing something, but I downloaded the full jQuery build and switched to a local library instead of Google’s and there’s no change. I put it back on the server demo as well.
Is it me?
I don’t like it that the tabs demo on the official documentation page is broken.
I think that we should revisit this after the demo on the official documentation page is confirmed as working. It was last night, so it shouldn’t be long.
Will do…
I’m not sure if the tabs library is fixed or not 'cause mine is still broken. Anyone?
Here’s how to keep a useful eye on it.
That’s just sad. I can’t imagine how many sites are dependent on the codebase. Certainly I can’t write jQuery, but I really advocate for it not just because it’s cool but because I thought it was pretty bulletproof.
It could well be due to one of the breaking changes within jQuery 1.4
A related bug report is:
Broken AJAX tab links after jQuery 1.4
http://dev.jqueryui.com/ticket/5065
Will investigate further when I get home.
Apparently the old jquery pages aren’t being used any more.
Instead - there is a fancy new web site for them. Here is the information about tabs, and loading them via ajax.
You will see that there is a “view source” link below the demo, so that the code can be played with to be understood. You’ll see that the ajax tabs don’t require any more scripting than normal tabs. It’s all automatic from the link path.
Just be sure to test the ajax-based code from files on your server, as they won’t work straight from your local client.
These are the script files to load at the start:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
Thanks Paul. Still not working in my test page http://ehydrant.com/trouble//accordion-custom3.htm. I had started with that new jQuery demo you pointed out, but switched over to the version from http://flowplayer.org/tools/demos/index.html to use their transition version. That version would still be nice for the transitions, but somewhere in the whole process the machine is gummed up and nothing is working.
Any thoughts?
Thanks for letting us know about the resource that you were initially using.
It looks like you have all of the information you need to achieve what you’re after.
Making Accordions with the Tabs
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
Loading tab contents with AJAX
$("ul.css-tabs").tabs("div.css-panes > div", {effect: 'ajax'});
It kind of brings things back full circle to my original situation:
I’m trying to nest 7 tab sets in an accordion representing each day of the week. I’ve tried all kinds of fixes, but no matter what I do, the results are inconsistent. It’s easier to see than explain now: http://www.ehydrant.com/trouble/accordion-custom2.htm
Except that I did clean up the HTML. If you try every accordion area (day), they act buggy and i don’t see why.