Accordion menu to equalize collumns on expand

[cjordan]

1) Script Title: Accordion menu script

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

3) Describe problem: I'm using the accordion menu script in a standard CSS-driven layout where I've used a navigation div tag that's been absolutely postioned on the left of the body content. In instances where there is not much content in the body area, the nav expands and overlaps the footer. Is there a way...maybe using the onexpandcollapse area of this script to insert javascipt to look at the heights of both the nav div and body div and make them equal...directly after the menu is expanded by the user? I need it triggered each time a section on the menu is expanded.

-Cameron

[Nile]

Please post a link to the page on your site that contains the problematic script so we can check it out.

Please include your code so that we can take a look at it, we can't do much without it. When you do post your code remember to use [code] tags. That includes [ html ], [ code ], and [ php ].

Please to the above before we can proceed in helping you.

[cjordan]

An example page can be seen at http://www.berry.edu/provost/. If you expand the Programs and Resources page, you'll see what I mean.

The nav bar list is saved as an include and is simply your standard set-up with some style tweaks.

The include is placed in each page as follows:

<div id="contentwrapper">
<div id="navcol">
  <!--#include virtual="/provost/bcconfig/bcnav.htm" --></div>
<div id="maincol">
...body content
</div>
</div>

The styles used are as follows:

#contentwrapper {
	position: relative;
	margin: 0 auto;
	width: 795px;
	text-align: left;
	z-index: 1;
	background-color: #FFFFFF;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-left-color: #999999;
}
#navcol {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding-top: 7px;
	padding-left: 5px;
	padding-bottom: 2px;
	width:140px;
	background-color:#FFFFFF;
	/*height: auto;
	min-height: auto;*/
	z-index: 1;
	}
#maincol {
	position: relative;
	margin-left: 141px;
	width: 634px;
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-top: 7px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 14px;	
             /*height: auto;
	min-height: auto;*/
}

The actual config for the menu looks like this:

ddaccordion.init({
	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
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [<%= navexpandindex %>], //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: false, //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: "normal", //speed of animation: "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
		
	}
	
})

[cjordan]

I'm still hoping someone can assist with this issue. I posted the code last week but have seen no additional updates.