How to switch between showing and hiding divs in CSS

CSS is one of the skills that front-end development must master, and switching between showing and hiding divs is an important part of it. This article will introduce in detail how to switch between showing and hiding divs in CSS.

1. Use the display attribute to show and hide divs

In CSS, the most commonly used way to switch between showing and hiding divs is to use the display attribute. Display can control the visibility and expressibility of elements. The hidden div effect we need is achieved through this attribute.

Commonly used values ​​of display are: block, inline, inline-block, none, etc., among which none is the key to hiding the div.

The CSS code is as follows:

.hide {
    display: none;
}
.show {
    display: block;
}

Hide is achieved by setting the display attribute of the .hide element to none, and display is achieved by setting the display attribute of the .show element to block.

In order to control the display and hiding of divs, we can use JavaScript or jQuery to access these CSS classes and add or remove them if necessary.

For example:

HTML code:

<button id="hidden_btn">点击隐藏</button>
<div id="hidden_div" class="hide">隐藏文本</div>

JS code:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Here, jQuery’s toggleClass() method is used to switch classes. When the button When clicked, this method will remove the .hide class from the editor and add the .show class, thus switching the div from hidden to displayed.

2. Use the visibility attribute to display and hide the div

The visibility attribute, like the display attribute, can be used to control the visibility of elements. Its common values ​​are: visible, hidden, collapse.

When we use the visibility attribute to hide an element, the element still occupies space in the HTML document and just becomes visually transparent or invisible, but its size and position still exist on the page.

CSS code is as follows:

.hide {
    visibility: hidden;
}
.show {
    visibility: visible;
}

The CSS code example is similar to the display example using the display attribute. Here we only talk about the JS code:

JS code:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Also use the toggleClass() method to switch classes.

3. Use the opacity attribute to show and hide the div

The opacity attribute is used to set the transparency of the element. Its value range is 0.0 to 1.0, where 0.0 means that the element is completely transparent, and 1.0 means that the element is completely transparent. The element is completely opaque.

The CSS code is as follows:

.hide {
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.show {
    opacity: 1;
    height: auto;
}

In addition to using the opacity attribute, we also define the height and overflow attributes to solve the problem of leaving space when hiding the div.

When the hide class is applied, the height of the div will be set to 0 and the content will be hidden. In order to automatically adjust the height after switching, we set the height to auto in the .show class, so that the div will automatically adjust and become visible when switching.

Let’s take a look at the JavaScript code:

JS code:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Also use the toggleClass() method.

4. Summary

The above are the three main ways to show and hide divs in CSS. They are using the display attribute, visibility attribute, and opacity attribute. In practical applications, we need to choose which method to use based on specific needs.

In addition, the value that combines visibility and display is often used - visibility:hidden;display:none. This value makes the element invisible and does not occupy screen space. This is better than The advantage of using display:none is that the JS code can obtain the position information of the element when calling it. However, when visibility:hidden;display:none is used, the element will no longer respond to click events, which may affect your application. Therefore, you need to choose according to the specific situation when using it.

In short, you need to master and be good at using CSS properties in order to make the developed web pages better in terms of visual effects, improve the user experience, and lay a solid foundation for the subsequent JS development.

The above is the detailed content of How to switch between showing and hiding divs in CSS. For more information, please follow other related articles on the PHP Chinese website!