How to implement click-to-hide display in css

CSS Click to Hide Show

In today’s Internet era, the focus of web design has shifted from simple static display to a more advanced interactive experience. Among them, hiding and showing is one of the most commonly used interaction methods. This method allows users to obtain the required information more conveniently and can greatly reduce redundant content on the page. In CSS, there are several methods to hide and show, and this article will introduce them one by one.

1. Use the display attribute

The value of the display attribute in CSS controls whether the element is displayed or hidden. Values ​​include:

• none: The element will be completely removed from the page and will be completely invisible to the layout.
• block: The element is displayed as a block-level element, meaning it occupies an entire line.
• inline: The element is displayed as an inline element, meaning it takes up the same space as the text.
• inline-block: The element is displayed as an inline element, but attributes such as width and height can be set.

Using the display attribute, we can hide and display by adding or removing the display attribute of the element. The sample code is as follows:

HTML code:

<div>
  <p>隐藏的内容</p>
</div>
<button>显示/隐藏</button>

CSS Code:

.box {
  display: none;
}

JavaScript code:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  if(box.style.display === "none") {
    box.style.display = "block";
  } else {
    box.style.display = "none";
  }
});

2. Use the opacity attribute

The opacity attribute controls the transparency of the element to achieve the effect of hiding or showing. When the opacity property is set to 0, the element will be completely transparent, so it cannot be seen. When the opacity property is 1, it is fully visible. But it will still take up its space on the page.

HTML code:

<div>
  <p>隐藏的内容</p>
</div>
<button>显示/隐藏</button>

CSS code:

.box {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.box.show {
  opacity: 1;
  pointer-events: auto;
}

JavaScript code:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

3. Use the visibility attribute

## The #visibility attribute controls whether an element is hidden but still retains its space, it does not completely remove the element from the page. When the visibility property is set to hidden, the element will be hidden but will still take up its space on the page. When the visibility property is visible, it is fully visible.

HTML code:

<div>
  <p>隐藏的内容</p>
</div>
<button>显示/隐藏</button>

CSS code:

.box {
  visibility: hidden;
}

.box.show {
  visibility: visible;
}

JavaScript code:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

To sum up, whether it is display, opacity or visibility attributes, They can both hide and show. Each of these three methods has its own advantages and disadvantages, and we can choose the appropriate method according to actual needs.

The above is the detailed content of How to implement click-to-hide display in css. For more information, please follow other related articles on the PHP Chinese website!