View Full Version : Problem with DD Accordion menu not working correctly

03-17-2009, 10:46 PM
1) Script Title: Bullet List Accordion Menu (CSS Library)

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

3) Describe problem: My menu keeps going back into the index page when I click on a product. When I click the product a second time, it goes to the correct page. See items under Bandsaw on this testsite...


Also check on the same index page, the cateogry Vaccum Packers, when you click on these products you can move easily from one product page to another, without being returned to the index page. I have checked the code and cannot see a problem? I'm a necomer so really appreciate some help here?

<meta name="robots" content="index, follow" />
<script type="text/javascript" src="jquery-1.2.6.pack.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 type="text/javascript">

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" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing

<style type="text/css">

width: 175px; /*width of accordion menu*/

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: black;
background: orange url(titlebar.png) repeat-x center left;
margin-bottom: 4px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 6px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px; /*bottom spacing between each UL and rest of content*/

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/

.arrowlistmenu ul li a{
color: #000099;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;

.arrowlistmenu ul li a:visited{
color: #000099;

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #000099;
background-color: #F3F3F3;

<script language="JavaScript">
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
// -->

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

<body onLoad="MM_preloadImages('images/used_btm.png','images/more_info_btm.png')">
<table width="90%" height="78" border="0" cellpadding="0" cellspacing="0" align="center">
<td bgcolor="#FFFFFF">
<div align="center"><img src="images/header2.png" width="980" height="170" align="baseline" usemap="#Map2" border="0">
<map name="Map2">
<area shape="rect" coords="476,114,597,164" href="index.html">
<area shape="rect" coords="600,114,719,165" href="aboutus.html">
<area shape="rect" coords="724,115,840,166" href="leasing.html">
<area shape="rect" coords="844,116,963,160" href="contactus.html">

<table width="907" height="66%" border="0" align="center" cellpadding="0" cellspacing="0">
<td width="214" height="389" valign="top">
<table width="175" border="0" cellpadding="0" cellspacing="0">
<td bgcolor="#FFFFFF"> <br>
<table width="175" border="0" align="center" cellpadding="0" cellspacing="0">

<div class="arrowlistmenu">
<h3 class="menuheader expandable">Bandsaws</h3>
<ul class="categoryitems">
<li><a href="aew-range.html">AEW Range</a></li>
<li><a href="medoc_range.html">Medoc Range</a></li>

<h3 class="menuheader expandable">Blocks and Tables</h3>
<ul class="categoryitems">
<li><a href="butchers_blocks_range.html">Blocks</a></li>
<li><a href="stainless_tables_range.html">S/Steel Tables</a></li>
<li><a href="polytop_tables_range.html">Poly Top Tables</a></li>
<li><a href="stainless_sinks_range.html">S/Steel Sinks</a></li>
<li><a href="general_items_range.html">General Items</a></li>

<h3 class="menuheader expandable">Burger Machines</h3>
<ul class="categoryitems">
<li><a href="auto_burger_range.html">Automatic Machines</a></li>
<li><a href="manual_burger_range.html">Manual Machines</a></li>
<li><a href="burger_papers.html">Burger Papers</a></li>

<h3 class="menuheader expandable">Chop Cutters</h3>
<ul class="categoryitems">
<li><a href="abm_700.html">ABM 700</a></li>
<li><a href="abm_1100.html">ABM 1100 Chop Cutter</a></li>

<h3 class="menuheader expandable">Convection Ovens</h3>
<ul class="categoryitems">
<li><a href="blue_seal_range.html">Blue Seal Range</a></li>
<li><a href="rational_range.html">Rational Range</a></li>
<li><a href="vector_range.html">Vector Range</a></li>

<h3 class="menuheader expandable">Cookers</h3>
<ul class="categoryitems">
<li><a href="jacketed_cookers_range.html">Jacketed Cookers</a></li>

<h3 class="menuheader expandable">Dip Tanks</h3>
<ul class="categoryitems">
<li><a href="dt60.html">DT 60</a></li>
<li><a href="dt100.html">DT 100</a></li>

<h3 class="menuheader expandable">Frozen Block Flaker</h3>
<ul class="categoryitems">
<li><a href="block_flaker.html">Thompson Frozen Block Flaker</a></li>

<h3 class="menuheader expandable">Ham Cookers</h3>
<ul class="categoryitems">
<li><a href="cpRose_range.html">CP Rose Range</a></li>
<li><a href="pj_range.html">PJ Range</a></li>

<h3 class="menuheader expandable">Mincers Table Top</h3>
<ul class="categoryitems">
<li><a href="mincers_amb_range.html">AMB Range</a></li>
<li><a href="mincers_mainca_range.html">Mainca Range</a></li>
<li><a href="mincers_ramon_range.html">Ramon Range</a></li>

<h3 class="menuheader expandable">Mincers Floor Standing</h3>
<ul class="categoryitems">
<li><a href="amb_tc32n.html">AMB TC32N</a></li>

<h3 class="menuheader expandable">Mixer Grinders</h3>
<ul class="categoryitems">
<li><a href="ambtc32fox.html">AMB TC 32 Fox Grinder</a></li>
<li><a href="thompson_900_range.html">Thompson 900 Range</a></li>
<li><a href="thompson_3000_range.html">Thompson 3000 Range</a></li>
<li><a href="thompson_4000_range.html">Thompson 4000 Range</a></li>
<li><a href="thompson_6000_range.html">Thompson 6000 Range</a></li>
<li><a href="thompson_hoist.html">Thompson Hoist</a></li>

03-18-2009, 05:12 AM
I don't really see an issue other than with your HTML itself. Starting from this page: http://www.nostressweb.co.uk/testsite/index.html, I click on the link "Medic Range", which correctly takes me to http://www.nostressweb.co.uk/testsite/medoc_range.html Now, if I click on "Medic Range" again, I am taken to the index page, but only because on range.html, the URLs for "Medic Range" points to index.html I assume this is an error on your part.

03-18-2009, 09:12 AM
Thank you very much and well spotted! As this site is still in development, I have not updated individual page menu's, which as you point out is the problem. My fault entirely - thank you again! A great service.