How To Hide And Show A Table-row (css-tables)

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

Solution 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-nava {
    display: inline-block;
    overflow: hidden;
    height: 1em;
    -webkit-transition: height .2s;
}

nav#menu-nav.hidden {
    line-height: 0em;
    background-color: transparent;
}
nav#menu-nav.hiddena {
    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