Show / Hide Div Problem

UTAlan · March 28, 2007

Wasn't sure if this would fall under JS or CSS, but I guess it qualifies as either. I have a div that is set to "display:none" when the page loads, but if a user clicks a link it is changed to "display: inline;". This part is working. However, I am having a problem with the now-shown-div covering the divs below it (instead of pushing them down when it expands). Is this a common problem?

<a href="javascript: showHide('hidden');">Show / Hide Div</a><br /><br />

<div style="display: none;" id="hidden">Hidden Div
<br /><br /><br /><br /><br /><br /><br /><br /><br />
Bottom of Div</div>

<div>Footer</div>

(when expanded, the footer is being covered up)

UTAlan · March 28, 2007

Maybe I should have put this under javascript b/c I think I figured out the problem. All of the code above is in a container div, which I am setting the height of using javascript. Apparantly that is setting the height in stone so it no longer expands dynamically...

<body onload="equalHeight('left', 'right');">
  <div id="left">
    text
  </div>

  <div id="right">
    <a href="javascript: showHide('hidden');">Show / Hide Div</a><br /><br />

    <div style="display: none;" id="hidden">
      Hidden Div
      <br /><br /><br /><br /><br /><br /><br /><br /><br />
      Bottom of Div
    </div>

    <div>
      Footer
    </div>
  </div>
</body>

Javascript Code:

function equalHeight(one,two) {
if (document.getElementById(one)) {
	var lh=document.getElementById(one).offsetHeight;
	var rh=document.getElementById(two).offsetHeight;
	var nh = Math.max(lh, rh);
	document.getElementById(one).style.height=nh+"px";
	document.getElementById(two).style.height=nh+"px";
}
}

Since I am setting the 'right' div to a certain height using js, is there a way to get it to expand when necessary?

Sign In

Show / Hide Div Problem

Recommended Posts

UTAlan

Link to comment

Share on other sites

UTAlan

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information