Populating Accordion Menu Content via AJAX

**Bunny1** · 07-09-2013, 05:52 PM

1) Script Title: Accordion Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...daccordion.htm

3) Describe problem: I have spent the better part of four days trying to get a nested accordion which fetches Ajax content to work.

A stripped-down version is here: http://www.themacdonaldcase.com/test_dda/test.html

A user should be able to click "A" or "B" and get a list of "A" names or "B" names, each one of which can also be clicked to open and close and show content about each person.

Everything works in IE8 (both locally and live), but neither Chrome nor Firefox will fetch the Ajax content properly.

Locally and live, when I click "A" or "B," Firefox (22.0) just give me a blank screen and "Connecting."

Chrome (local): When I click "A" or "B," they "jump" a little, but nothing opens.
Chrome (live): The screen goes white when "A" or "B" is clicked.

Here's a snippet of the main header code (styles not shown):

Code:

<HEAD>
//Initialize MAIN content:
ddaccordion.init({
    headerclass: "technology", //Shared CSS class name of headers group
    contentclass: "thelanguage", //Shared CSS class name of contents group
    ....
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
    }
})
</HEAD>
<BODY>
<h3 class="technology">"A" names</h3>
<div class="thelanguage">
<a class="hiddenajaxlink" href="A.htm">A</a>
</div>
</BODY>

And here's a snippet from one of the fetched Ajax pages (styles not shown):

Code:

<HEAD>
//Initialize SUB content:
ddaccordion.init({
    headerclass: "Aheader", //Shared CSS class name of headers group
    contentclass: "Acontent", //Shared CSS class name of contents group
    ....
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
    }
})
</HEAD>
<BODY>
<h3 class="Aheader">Aaron</strong></h3>
<div class="Acontent">
<BR>Biography for Aaron goes here.
<BR><BR>
</div>
</BODY>

Side note: Most accordion scripts I've tried require unique identifieers for each content group. I have no probem with creating unique IDs for the A through Z main headers, but there are thousands of individual names in total, and it would be impractical and very labor-intensive to create unique IDs for each name. That's why I chose the Accordion Content script, because it doesn't need unique IDs for the various headers.

I've tried just about everything I know to do, including adapting the script shown on this page. I also tried using the Switch Content script (DD http://www.dynamicdrive.com/dynamici...tchcontent.htm) for the main A-Z headers, and the Accordion Content script for the sub-content. I've also tried putting all scripts in the main page and none on the fetched pages; I've tried putting all scripts on the fetched pages and none on the main page; I've tried putting the top-level scripts on the main page and sub-level scripts on the sub-pages, but nothing works.

Can someone please help? I don't have much hair left at this point since I've ripped most of it out trying to figure out why my Ajax content doesn't get fetched in Chrome or Firefox.

I came back to edit this post to say that I hope I didn't post this in the wrong place. I just realized that the topic here is Accordion Menu, not Accordion Content. If I need to repost elsewhere, please let me know. Thank you.

**Beverleyh** · 07-09-2013, 06:12 PM

I have moved your question to its own thread since the one you posted it in originally was last active in 2009 and could have been deleted as spam.

**Bunny1** · 07-10-2013, 01:34 AM

Thank you, Beverleyh. And thanks for the nice formatting on my script snippets.

Hope to get an answer from someone soon. Thanks again.

**jscheuer1** · 07-10-2013, 07:45 AM

There could also be other problems. However, the accordion script uses document.write() to add style to the page each time it's initialized. In most browsers that will overwrite the page.

Use this version of the script which I've edited to use jQuery's append() function instead of document.write() (right click and 'Save As'):

ddaccordion.js

The browser cache may need to be cleared and/or the page refreshed to see changes.

I experimented and this does fix the problem. I also discovered that you can remove:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<HEAD>
<TITLE>Test Ajax content to fetch</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

<link rel="stylesheet" type="text/css" href="style_names.css">


<!--------------- START OF ACCORDION CONTENT HEAD --------------->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

from the A.htm, B.htm, etc., as these are already on the 'top' page.

In fact, by changing things a bit on the 'top' page, the sub pages can (also with a few changes) be greatly simplified (right click and 'Save As'):

accordion.zip

Be sure to use the updated script with these new pages.

Demo:

http://home.comcast.net/~jscheuer1/s...dion/test.html

The styles on the top page can and should be made external.

**Bunny1** · 07-10-2013, 04:14 PM

jscheuer1:

I'm so happy at this moment, I almost feel like weeping with joy. IT WORKS.

I've been coding since 1978, in machine language, DOS and beyond (even wrote my own custom font for ROM on an old Commodore back in the early '80s), but this really had me stumped. I was also a moderator for eight years on CompuServe, managing 32 forums and answering people's questions, so my hat is off to you for your quick and easy-to-understand reply.

Thank you also for the simplified pages you created. I had made some similar pages during my testing process, with all my styles in an external file (and the ddaccordion script removed from the fetched pages) but nothing worked no matter what I tried, and by the time I posted here, I was so worn-out from all the testing that I just put up the last version I was working on and left it at that.

THANK YOU again, from the bottom of my heart. You've made this woman a very, very happy camper. Now I can not only finish this project but will also have the ability to apply nested accordions to other projects in the future. Fantastic.

**Bunny1** · 07-10-2013, 06:17 PM

One more question (please and thank you):

The docs for Accordion Content say that the following is needed for the script to work:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

I'm going to want to have a banner, etc. for this new "Names" page that matches another page that has been online for a long time, and that page uses a "4.01 Transitional" doctype and a plain <HTML>:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

Using the first DOCTYPE lines above throws off the formatting for my banner, etc. But I've tested your accordion.zip files with the DOCTYPE I've been using, and it seems to work perfectly.

My question is: Is there any foreseeable problem I might have in the future if I use the "4.01 Transitional" DOCTYPE (and just "<HTML>"> that I've used elsewhere on my site?

**jscheuer1** · 07-10-2013, 07:41 PM

I'm not certain. You should test in IE though. That's usually the browser that needs standards mode to operate correctly, if any, though others can be a problem sometimes. Certain measurements that the script needs might not be accurate in quirks mode.

I didn't write the accordion script, so it might not really be that important. Sometimes the Dynamic Drive coder(s) put things in there like that rather than worry about testing in quirks mode, that way if anything goes wrong in quirks mode, they don't have to worry about it.

Even if standards are required, that exact DOCTYPE and html tag are not required, so we know that advice is at least a little bit of an exaggeration. But your preferred DOCTYPE is quirks mode.

As I say, test in IE, as many versions as possible. You can skip 6 and 7 if you like, if you don't think people will be using those much, but remember folks with IE 8 and up can use modes like IE 7, even like IE 5.5, sometimes not even realizing it, but 8, 9, and 10 should be tried in any case. Our simple demo, the one I gave you, seems OK though, at least in IE 10's IE 7 mode with the quirks rendering of IE 5.5, so that's a good sign.