Conflict between ddacordion.js and equalcolumns.js

[parboy]

1) Script Title: CSS Equal Columns Height script (v1.01) AND
Bullet List Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/bl...height-script/ AND http://www.dynamicdrive.com/dynamici...enu-bullet.htm

3) Describe problem: It seems that when accordion list expands, pushing content deeper than containing div, the content pushes through the bottom of the containing div. The containing div should expand as needed. This works if I remove the equalcolumns script. See example: http://dev.inkari.com/experience.php. How can I get these two scripts to work together?

Thanks,
Bill

[Beverleyh]

As you're using jQuery, you might like to switch to a jQuery responsive height solution as provided here : http://css-tricks.com/forums/discuss...of-this-pen/p1

Here is also another solution : http://stackoverflow.com/questions/1...th-new-content

[vwphillips]

add an anchor below the text

						<p style="color:red; margin: 200px 90px 0 60px; line-height: 14px;">This text gets pushed below the containing div's bottom edge. <br />The containing div should expand with the list.</p>
                     <a id="anchor" ></a>

					</div> <!-- arrowlistmenu -->

then

		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", "clickgo", 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: "normal", //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
             document.getElementById('main-content').style.height=document.getElementById('side-bar').style.height=document.getElementById('photo-bar').style.height=document.getElementById('anchor').offsetTop+'px';;
			//do nothing   "side-bar", "main-content", "photo-bar"
			}
		})

[parboy]

Thanks Beverley and Vic,

I don't know much about Javascript yet so I opted for Vic's solution because I could plug it in without understanding syntax. It works!

Bill