How to hide and show a table-row (css-tables) - html

Question

I'm trying to hide and show a table row using css-tables and pure JavaScript (No jQuery).
I've got a div with the display set to table-row and a nav inside of it. No matter what I do, border-collapse etc, the div still maintains some of it's height.
Any ideas?
HTML:
<!-- Header -->
<header id='header'> <!-- Table Row 1 -->
<div id="header-table">
<div id='back'>
<button id='back-button'>←</button>
</div>
<div id="title">
<h1 id='title-h1'>Title</h1>
</div>
<div id="menu">
<button id='menu-button'>≡</button>
</div>
</div>
</header>
<nav id="menu-nav">
Introductory Page
Activity List
Settings
About
</nav>
<div id="body"> <!-- Table Row 3 -->
<div id="wrapper">
CSS
header#header {
position: relative;
display: table-row;
}
div#menu-nav-cell {
position: relative;
display: table-row;
text-align: center;
overflow: hidden;
background: yellow;
}
nav#menu-nav {
display: table-row;
height: 0em;
width: 100%;
color: #000;
background: pink;
}
div#body {
position: relative;
display: table-row;
height: 100%;
}
div#wrapper {
position: relative;
height: 100%;
}

Answer 1

Why not simply using display: none?
Maybe I misunderstood, since you said you have a div with a nav inside, but I cannot see that in your html sample.
I think you want to show/hide the navigation. This can be done by adding this css rule:
nav#menu-nav.hidden {
display: none;
}
and javascript
document.getElementById("toggle").onclick = function () {
document.getElementById("menu-nav").classList.toggle("hidden");
}
jsFiddle
If you want to animate the height, you can do this:
/* new rules that I added */
nav#menu-nav {
line-height: 1em;
-webkit-transition: line-height .2s, background-color .2s;
}
nav#menu-nav a {
display: inline-block;
overflow: hidden;
height: 1em;
-webkit-transition: height .2s;
}
nav#menu-nav.hidden {
line-height: 0em;
background-color: transparent;
}
nav#menu-nav.hidden a {
height: 0;
}
The trick is to use overflow: hidden; display:inline-block for the table cells, instead of display:table-cell.
This way, changing the height and line-height to zero works fine.
However there is still some height (around 3px) still visible, so I decided to animate the background-color to transparent as well. If you comment that part that animates the background color, you will understand what I mean.
jsFiddle v2