How to hide and show divs in css

DIV Hide and show CSS

DIV is an important element in HTML tags, which can be used to display text, pictures, videos, etc. In web design, we often encounter situations where we need to hide or show certain elements, which requires using CSS to set the DIV. This article will introduce how to use CSS to hide and show DIV.

1. CSS display attribute

The CSS display attribute can control the way elements are displayed on the page. display has multiple values, the following are commonly used:

1. none: the element is not displayed and does not occupy page space;
2. block: the element will generate a block-level container , occupies the entire width, and is often used to display block-level elements such as text or pictures;
3. inline: The element will not occupy an exclusive line, but only occupies its own width and height, and is often used to display inline elements such as links and pictures;
4. inline-block: Similar to inline, but the width and height can be set;
5. flex: Flexible layout, which can flexibly allocate the space of elements.

We can hide and display DIV by setting the display property of CSS.

The following is an example to illustrate:

In the HTML file, we create a DIV element:

Here is to hide /Displayed content

Then in the CSS file, set the display attribute of the DIV:

#myDiv{

  display:none;   /* 默认隐藏 */

}

When the page loads, the DIV element will be hidden. At this point, we need to add an event to achieve the display effect when the mouse clicks.

In JavaScript, you can change the display property of CSS by setting the style property of the element to hide and display the element. The following are the specific operations:

/ Get the element/
var myDiv = document.getElementById('myDiv');

/ When the mouse clicks , display DIV /
function showDiv(){

   myDiv.style.display = 'block';

}

/ When the mouse is clicked, hide DIV /
function hiddenDiv( ){

   myDiv.style.display = 'none';

}

In this way, when the mouse is clicked, the DIV will be presented on the page as a block-level element. When clicked again, it will be hidden again.

2. CSS visibility attribute

Another attribute that controls the hiding and display of elements is visibility. visibility has two values: visible (visible) and hidden (hidden). Unlike display, when visibility is set to hidden, the element is hidden but still occupies space on the page.

In the HTML file, we also create a DIV element:

Here is the content to be hidden/shown

Then in the CSS file, set the visibility attribute of the DIV:

#myDiv{

  visibility:hidden;   /* 默认隐藏 */

}

When the page is loaded, the DIV element will be hidden stand up. At this time, we need to add an event to achieve the display effect when the mouse clicks.

In JavaScript, we can also change the element's visibility attribute by changing the element's style attribute. The following is the specific code:

/ Get the element/
var myDiv = document.getElementById('myDiv');

/ When the mouse clicks , display DIV /
function showDiv(){

   myDiv.style.visibility = 'visible';

}

/ When the mouse is clicked, hide DIV /
function hiddenDiv( ){

   myDiv.style.visibility = 'hidden';

}

In this way, the DIV will become visible when the mouse is clicked. When clicked again, it will become hidden again.

3. Summary

In web design, displaying and hiding elements is a very common requirement. There are two main ways to control the hiding and display of elements: one is to control it by modifying the display attribute of the element, and the other is to control it by modifying the visibility attribute of the element. By mastering these two methods, we can more flexibly control the display and hiding of various elements, thereby achieving better web page display effects.

The above is the detailed content of How to hide and show divs in css. For more information, please follow other related articles on the PHP Chinese website!