CSS Visibility Option: Collapse


You’re probably already familiar with the visibility CSS property. We use it to hide or show something on the page by toggling its value between visible and hidden. But there’s a third value you might not have noticed yet.

Its value, collapse, used specifically in html table, hides rows and columns in a way similar to how details collapses its content. If used on anything else and in browser not supporting this value yet, it behaves like visible:hidden.

.ans {
visibility: collapse;
.que:hover + .ans {
visibility: visible;

view raw
hosted with ❤ by GitHub

.que and .ans are two tr elements, for a question and answer, respectively. See the codepen.

The Author

Web developer and writer. @rpsthecoder in Twitter.