Question

The technique I have used to hide/unhide a div is as follows:

$("#" + sectionId).css("display", "");      // unhide
$("#" + sectionId).css("display", "none");  // hide

This works fine, except I need to make this hiding/unhiding not affect the dimensions on the rest of the page. That is, I do not want the act of hiding the content to shrink all the content around it. In other words, I would prefer to have the dimensions of everything on the page remain as it would be if the div were always visible. I’ve tried setting the div to zero height, but that doesn’t seem to have an effect.

Note: these divs actually reside within a table, hence cells are resizing automatically to fit content (which I do not want).

Update: Ok, half the problem is resolved but note that this is a table not a div that I am trying to hide/unhide. I need the table height to shrink down to zero but maintain its width.

Answer 1

Use visibility='hidden' and visibility='visible' instead:

$("#" + sectionId).css("visibility", "visible");  // unhide
$("#" + sectionId).css("visibility", "hidden");   // hide

This will keep the object physically in the page but it will be “invisible”, as opposed to “removing” with display.

More info.

---

EDIT

As for the new/editted question:

Ok, half the problem is resolved but note that this is a table not a div that I am trying to hide/unhide. I need the table height to shrink down to zero but maintain its width.

Set the table width to a fixed value and the hide the divs with content using display property:

<table style="width: 500px;">
  <tr><td>
    <div id='div1'>Some content</div>
  </td></tr>
</table>

When you now hide the div1 using then code you’ve used in your question, the table width should stay the same width but shrink in height.

EDIT2: A simple example.