How to hide and show elements in CSS

In web development, it is often necessary to hide or show an element, such as menus, prompt boxes, etc. Although JavaScript can achieve this function, sometimes we don't want to introduce too many scripts or limit browser compatibility. The CSS click-to-show-hide technique can be used to hide and show elements using CSS without using JavaScript.

How to use CSS click-to-show-hide technique?

First, set the element to be hidden to display: none;, for example:

  <div id="myDiv" style="display: none;">
    这是被隐藏的元素。
  </div>

Secondly, add a trigger, such as a button or link, so that when the user clicks, the hidden element will display. To achieve this effect, you need to use the :checked pseudo-class and ~ sibling selector in CSS.

  <input type="checkbox" id="toggle" />
  <label for="toggle">点我显示</label>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #toggle {
      display: none;
    }

    #toggle:checked ~ #myDiv {
      display: block;
    }
  </style>

In this example, we use a checkbox element as the trigger. When this checkbox is selected, hidden elements will be displayed. This effect is achieved through the :checked pseudo-class and ~ sibling selector in CSS. When the checkbox is selected, its sibling element #myDiv is displayed.

If you want to use a link or button as a trigger, you can have the following code:

  <a href="#myDiv" id="toggle">点我显示</a>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #myDiv {
      display: none;
    }

    #toggle:focus ~ #myDiv {
      display: block;
    }
  </style>

In this example, we use a link element as the trigger. When the link receives focus, the hidden element is revealed. This effect is achieved through the :focus pseudo-class and ~ sibling selector in CSS. When a link receives focus, its sibling element #myDiv is displayed.

You can also use label elements with plain text content as triggers. Just wrap them in a label element and point the for attribute to the id of the element you want to display.

Summary

The CSS click-to-show-hide technique is a useful method that can be used to hide and show elements using CSS without using JavaScript. By using the :checked pseudo-class and the ~ sibling selector or the :focus pseudo-class and the ~ sibling selector, we can easily add click-to-show-hidden functionality to any element.

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