How do I hide a DIV

CSS visibility • Visible or hidden

visibility hidden vs display: none

With visibility: hidden In contrast to CSS display: none, the browser creates an empty box with the size of its content. In both cases, of course, the HTML element remains visible in the source text.

Another difference between visibility: hidden and display: none reveals itself with CSS3 transition:

  • visibility can be animated with CSS,
  • display Not.

The fade effect in this example is based exclusively on CSS and works without Javascript.

  • Menu 1
    • U menu 1
    • U menu 2
    • U menu 3
    • U menu 4
  • Menu 2
    • U menu 1
    • U menu 2
    • U menu 3
    • U menu 4

Since the browser does not display the box, it still generates it, "the links break through" - they react to hovering with the mouse. This can be used for other effects:

Drop-down menus are controversial because they are not necessarily barrier-free. Indeed, it can happen that a nimble mouse quickly runs over the hover link or the block becomes invisible again too quickly. In a constellation like this, the menu reacts reliably to a large area.

CSS visibility

Hereditary: yes

visibility
decides whether an element is visible or not. An invisible element is completely transparent, but it still takes up space on the page and other elements cannot take up the space
values
collapse | hidden | visible
collapse
hides rows or columns of a table. A hidden row or column can be used for other content. For all other elements, collapse has the same effect as the value hidden.
Internet Explorer does not support collapse.
hidden
determines that an element is not visible on the page.
visible
is the default and determines that an element is visible on the page.

CSS visibility: hidden vs. display: none;

# img1 img {border: 2px solid gray; } # img2 img {border: 2px solid gray; } # img3 img {border: 2px solid gray; }

A click on the toggle button sets the images on the left and right to the CSS style visibility: hidden, the middle picture on display: none. If the middle picture is hidden, its space must collapse and the right picture must slide to place 2.

Tables with visibility: collapse

<table> <colgroup><col /> <col /> <col style="visibility: collapse;" /> <col /></colgroup> … <tr style="visibility: collapse;"> <td>#3</td> … </tr> <tr> <td>#4</td><td style="visibility: collapse; ">395 nm</td> … </tr> </table>

Tables with visibility: collapse;

  • CSS visibility: collapse for table columns is supported by Firefox, Opera and IE 9. Firefox shows table columns with visibility: collapse not, but the column takes up the space provided and the borders around the table cells are displayed.
  • In IE 9 and Opera, column # 2 collapses, leaving no blank.

Table rows and cells with visibility: collapse;

  • Safari does not show table rows and table cells with the property {visibilty: collapse;}, but the row / cell takes up the originally intended space.
  • In IE 9 and Opera, table row # 3 collapses and does not take up any space. The table cell is not displayed.

Ads in this browser (column # 2 and row # 3 as well as the table cell below in column # 1 should not be visible):

#1#2#3#4
#1380 nm0.0200.0260.026
#2385 nm0.0390.0520.026
#3390 nm0.0800.1050.026
#4395 nm0.1550.1880.026