Problem with Bullet List Accordion Menu script

[Savvannis]

1) Script Title: Bullet List Accordion Menu with nested levels

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

3) Describe problem:

Website address working on: http://houston-by-night.com/login.php

The 1st level expand/hide works wonderfully, however I cannot get the nested level to expand/hide, they are all just listed like a regular menu. On this page, the nested level is under the menu "Venues", each venue's menu is supposed to be accordion as well and they just ALL show as open.

I have tried in IE, Chrome and Firefox, but have not installed Opera or Safari on my system to try those, and it doesn't work in any browser.

I was also wondering, if I can get the 2nd level accordion to work, is it possible to add a third and subsequent levels?

Any help would be greatly appreciated! I'm pulling my hair out over here.

[ddadmin]

There is error with your nested menu items' markup in that they are not properly nested:


<h3 class="menuheader expandable">Venues</h3>
<ul class="categoryitems">
<li><a href="http://houston-by-night.com/venues/#" class="subexpand"></a><img src="http://houston-by-night.com/imgs/MortalBar.jpg" /></li>
<ul class="subcatitem" style="margin-left: 15px">
<li><a href="http://houston-by-night.com/venues/#">Creation Rules</a></li>
<li><a href="http://houston-by-night.com/venues/#">Gangs</a></li>
<li><a href="http://houston-by-night.com/venues/#">Police</a></li>
<li><a href="http://houston-by-night.com/venues/#">Medical</a></li>
<li><a href="http://houston-by-night.com/venues/#">Media</a></li>
<li><a href="http://houston-by-night.com/venues/#">Setting</a></li>
</ul>

The nested UL should be wrapped inside the parent LI element (in red), so something like:


<h3 class="menuheader expandable">Venues</h3>
<ul class="categoryitems">
<li><a href="http://houston-by-night.com/venues/#" class="subexpand"></a><img src="http://houston-by-night.com/imgs/MortalBar.jpg" />
<ul class="subcatitem" style="margin-left: 15px">
<li><a href="http://houston-by-night.com/venues/#">Creation Rules</a></li>
<li><a href="http://houston-by-night.com/venues/#">Gangs</a></li>
<li><a href="http://houston-by-night.com/venues/#">Police</a></li>
<li><a href="http://houston-by-night.com/venues/#">Medical</a></li>
<li><a href="http://houston-by-night.com/venues/#">Media</a></li>
<li><a href="http://houston-by-night.com/venues/#">Setting</a></li>
</ul>
</li>

Repeat this for all of your other nested ULs as well.

[Savvannis]

Done... Still not working... :(

I even moved the </a> to the end, after the image, so the image was linked... didn't work...

Next idea?

[ddadmin]

Ah ok I spot another problem, the name of your sub menu contents' class name in red:


<h3 class="menuheader expandable">Venues</h3>
<ul class="categoryitems">
<li><a href="http://houston-by-night.com/venues/#" class="subexpand"></a><img src="http://houston-by-night.com/imgs/MortalBar.jpg" />
<ul class="subcatitem" style="margin-left: 15px">
<li><a href="http://houston-by-night.com/venues/#">Creation Rules</a></li>
<li><a href="http://houston-by-night.com/venues/#">Gangs</a></li>
<li><a href="http://houston-by-night.com/venues/#">Police</a></li>
<li><a href="http://houston-by-night.com/venues/#">Medical</a></li>
<li><a href="http://houston-by-night.com/venues/#">Media</a></li>
<li><a href="http://houston-by-night.com/venues/#">Setting</a></li>
</ul>
</li>

It should be "subcatitems", or the name you specified in the initialization code.

[Savvannis]

Thank you! Thank you! Thank you!!! I must have been staring at that way too long for me to miss a single letter like that!! Thank you!!! If this system would let me click thank you a few more times I would! That was driving me CRAZY!!!!

[Savvannis]

Ok, so adding another level should be as easy as just making sure the level is in the

<script type="text/javascript">
ddaccordion.init({ //top level headers initialization
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"

portion of the page as

<script type="text/javascript">
ddaccordion.init({ //top level headers initialization
headerclass: "newuniqidentifier", //Shared CSS class name of headers group that are expandable
contentclass: "newuniqueidentifiersub", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"

for each level that I need to add, then make sure the

<h3 class="menuheader expandable">Venues</h3>
<ul class="categoryitems">
<li><img src="http://houston-by-night.com/imgs/MortalBar.jpg" class="subexpand" />
<ul class="subcatitems" style="margin-left: 15px">
<li><a href="http://houston-by-night.com/venues/#">Creation Rules</a></li>
<li><a href="http://houston-by-night.com/venues/#" class="newuniqueidentifier">Setting</a>
<ul class="newuniqueidentifiersub">
<li><a href="link and stuff">link</li>
</ul>
</li>
</ul>
</li>

all match... right? Did that make sense to you? It does to me... Crazy brain.