Hidden box CSS: easily hide and show page elements

In web design, hidden boxes are a commonly used CSS technique that can simply hide and display page elements to increase the interactivity and operability of the page. In this article, we will introduce how to use CSS to achieve the hidden box effect, including style setting, event binding and practical application.

1. Style setting

To achieve the hidden box effect, you first need to define a hidden box style. You can hide the element by setting the display attribute of the element to none, as shown below:

.hidden{
    display: none;
}

At this time, the element to which this style is applied will be hidden and will not occupy any space on the page.

2. Event Binding

In order to display and hide the hidden box, we need to bind events to related elements. Commonly used events include click and hover.

1. click event

The click event is used to respond to the user's mouse click operation. When the user clicks on a specific element, the display or hiding of the element can be controlled through JS code.

HTML code:

<button id="btn">显示/隐藏</button>
<div id="box" class="hidden">这是一个隐藏框</div>

CSS code:

.hidden{
    display: none;
}

JS code:

var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function(){
    if(box.classList.contains("hidden")){
        box.classList.remove("hidden");
    } else{
        box.classList.add("hidden");
    }
};

The above code sets a button and a hidden box. When the user When the button is clicked, the JS code is used to determine whether the hidden box is hidden. If it is hidden, the .hidden style is removed and the hidden box is displayed; otherwise, the .hidden style is added to hide the hidden box.

2. hover event

hover event is used to respond to the user's mouse hover operation. When the user hovers over a specific element, the display or hiding of the element can be controlled through JS code.

HTML code:

<div id="box">鼠标悬停显示隐藏框</div>
<div id="hidden-box" class="hidden">这是一个隐藏框</div>

CSS code:

.hidden{
    display: none;
}

JS code:

var box = document.getElementById("box");
var hiddenBox = document.getElementById("hidden-box");
box.onmouseover = function(){
    hiddenBox.classList.remove("hidden");
}
box.onmouseout = function(){
    hiddenBox.classList.add("hidden");
}

The above code sets a container and a hidden box. When the user When hovering over the container, remove the .hidden style through JS code to display the hidden box; when the mouse leaves, add the .hidden style to hide the hidden box.

3. Practical Application

In practical applications, hidden boxes can be used to achieve some common interactive effects, such as drop-down menus, folding panels, prompt boxes, etc.

1. Drop-down menu

Drop-down menu is a common component in web design and can be used to display and select different options. The drop-down menu effect can be easily achieved using the hidden box CSS trick.

HTML code:

<div class="dropdown">
    <button class="dropdown-btn">点击显示下拉菜单</button>
    <div class="dropdown-menu hidden">
        <a href="#">选项1</a>
        <a href="#">选项2</a>
        <a href="#">选项3</a>
    </div>
</div>

CSS code:

.hidden{
    display: none;
}
.dropdown-menu{
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
}

JS code:

var dropdownBtn = document.querySelector(".dropdown-btn");
var dropdownMenu = document.querySelector(".dropdown-menu");
dropdownBtn.onclick = function(){
    if(dropdownMenu.classList.contains("hidden")){
        dropdownMenu.classList.remove("hidden");
    } else{
        dropdownMenu.classList.add("hidden");
    }
};

The above code sets a drop-down menu button and a drop-down menu option , when the user clicks the button, use the JS code to determine whether the drop-down menu is displayed, hide the drop-down menu when it is displayed, and display the drop-down menu when it is hidden.

2. Collapse panel

Collapse panel can be used to display and hide multiple content blocks to make the page tidier. The collapsed panel effect can be easily achieved using the hidden box CSS trick.

HTML code:

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">折叠面板1</div>
        <div class="accordion-content hidden">这是折叠面板1的内容</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">折叠面板2</div>
        <div class="accordion-content hidden">这是折叠面板2的内容</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">折叠面板3</div>
        <div class="accordion-content hidden">这是折叠面板3的内容</div>
    </div>
</div>

CSS code:

.hidden{
    display: none;
}
.accordion-item{
    border: 1px solid #ccc;
    margin: 10px 0;
}
.accordion-header{
    background-color: #eee;
    padding: 5px;
}
.accordion-content{
    padding: 10px;
}

JS code:

var accordionHeaders = document.querySelectorAll(".accordion-header");
var accordionContents = document.querySelectorAll(".accordion-content");
for(var i = 0; i < accordionHeaders.length; i++){
    accordionHeaders[i].onclick = function(){
        var content = this.nextElementSibling;
        if(content.classList.contains("hidden")){
            content.classList.remove("hidden");
        } else{
            content.classList.add("hidden");
        }
    }
}

The above code sets multiple folding panel items. When the user clicks When the title of a certain panel is determined, the JS code is used to determine whether the panel content is displayed. When displayed, the content is hidden, and when hidden, the content is displayed.

4. Summary

The hidden box CSS technique is a simple and practical technology in web design. It can easily hide and display page elements and improve the interactivity and operability of the page. . Through the introduction of this article, we can understand the implementation principles and common application scenarios of hidden boxes, and help provide users with a better web design experience.

The above is the detailed content of Hidden box CSS: easily hide and show page elements. For more information, please follow other related articles on the PHP Chinese website!