Accordian Menu Script

**tucsonsam** · 03-22-2008, 08:02 AM

1) Script Title: Accordian Menu Script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.htm

3) Describe problem: Each of the menu items appears, but all the submenus show under the submenuheaders (in other words, they do not expand and contract) and the plus.gif and minus.gif do not show.

http://www.tucsonsam.com/tepoacug/manual/tantivirus.php

Any help will be appreciated.

tucsonsam

**ddadmin** · 03-22-2008, 09:04 AM

There's an error in your HTML that may be throwing off the script:

Code:

	<li><a href=""OEaccount.php">Setting Up an Outlook Express Account</a></li>
	<li><a href="editOEaccount.php">Editing an E-Mail Account in Outlook Express</a></li>
	<li><a href="sendreceiveOE.php">Sending and Receiving E-Mail in Outlook Express</a></li>
	<li><a href="replyforward.php">Replying to and Forwarding E-Mail</a></li>
	<li><a href="sendAOL.php">Using AOL 8.0 - Sending an E-mail</a></li>
	<li><a href="attachAOL.php">Using AOL 8.0 - Attaching a Photo</a></li>

	<li><a href=""receiveAOL.php">Using AOL 8.0 - Receiving E-mail</a></li>

Notice the two double quotes in red, which you should fix.

**tucsonsam** · 03-22-2008, 03:48 PM

Thank you, I should have caught that. Unfortunately, correcting it did not correct my problem. I'm continuing to try to figure out what is wrong, and hope someone can spot it for me. I'm tearing my hair out!

**tucsonsam** · 03-23-2008, 09:02 PM

I have found the problem, but still have a question.

I fixed most of the problem by editing ddaccordian.init()

I have a question about this line in that part of the script:

toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]

I'm not sure which classes to use (the example uses ["","openpet"], but I can't seem to relate that to any classes I've declared in my script.

Right now I have the plus and minus icons on the first submenu under each menuheader and some of the menuheaders open and close correctly and some don't. Each time I make a change to toggleclass, it changes how they open and close, but I don't have the right combination yet.

Help?

**ddadmin** · 03-23-2008, 11:59 PM

The toggleclass parameter merely dynamically adds two CSS classes to the menu headers depending on whether that header is open, or closed, respectively. You have to define these two CSS classes within the stylesheet of your page as well in order for any visible effect to appear, so for example:

Code:

<style type="text/css">

.happy{
color: red
}

.sad{
color: blue
}

</style>
"
"
toggleclass: ["happy", "sad"]

The "plus" or "minus" signs you talk of can be defined either via CSS classes above (using background images), but most likely I reckon in your case, you're using another parameter, togglehtml: ["prefix", "", ""], to specify them, so that would the two two separate issues.

**tucsonsam** · 03-24-2008, 04:12 AM

Yes, I am using togglehtml to specify the plus and minus signs. However, instead of showing up on the submenuheader, they are showing up on the first submenu after each submenuheader.

Other than that, everything else seems to work ok.

Any ideas?

**ddadmin** · 03-24-2008, 04:40 AM

What's the URL to the problem page? Here the plus/minus icons look right.

**tucsonsam** · 03-24-2008, 05:06 AM

Aha - what browser are you using - let me guess - Firefox?

Earlier I was testing it on three browsers, but they always showed the same thing, so I got away from it. In Slimbrowser and IE7, they look the way I described them. In Firefox, they look good.

Is there any fix for this? BTW, in Slimbrowser and IE the example on the DynamicDrive pages works as it should.

Thanks for sticking with me on this!

**ddadmin** · 03-25-2008, 04:59 AM

Yes I was.

Anyhow, looking at your page in IE, I see the problem is since your page doesn't contain a valid doctype. Remove what's on there right now, and replace it with:

Code:

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

**tucsonsam** · 03-31-2008, 12:51 AM

Didn't realize I had gotten another reply to this. I'm still working on it and thought I'd check anyhow.

Unfortunately, your fix doesn't seem to make any difference. I'm still wondering if my problem has something to do with the ddaccordian.js options, but nothing I change fixes the problem either.

Here's how it looks at the present time: