如何使用 CSS 和 JavaScript 创建可折叠部分？

可折叠部分是可以通过单击来缩小和扩展的内容部分。它们是一种流行的内容组织方式，用户只有在他愿意时才能看到某个部分的内容。在本文中，我们将学习如何使用 CSS 和 JavaScript 创建一个简单的可折叠部分。

它是通过使用一个按钮并将该部分的内容包含在一个 div 中来完成的。事件监听器被添加到按钮以监听鼠标点击。每次单击按钮时都会切换“Active”类。当该部分展开时，按钮的背景颜色会发生变化。此外，内容的“显示”属性在单击按钮事件时更改为“阻止”，以使其在“无”(隐藏)时可见，反之亦然，如下所示。

示例 1：

      
    .collapse {
        background-color: #a2de96;
        border: none;
        outline: none;
        font-size: 25px;
    }
   
    .active,
    .collapse:hover {
        background-color: #438a5e;
    }
   
    .text {
        background-color: #e1ffc2;
        display: none;
        font-size: 20px;
    }

   

    GeeksforGeeks
    
        Open Collapsible section
    
      
    
        A Computer Science portal for geeks. 
        It contains well written, well thought 
        and well explained computer science and
        programming articles, quizzes and ...
    
   
    
        var btn = document.getElementsByClassName("collapse");
   
        btn[0].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
  
    

   

输出：

• 折叠：

扩展：

示例2：折叠按钮和内容的“宽度”设置为50%，内容“居中”对齐。

  


    .collapse {
        background-color: #a2de96;
        border: none;
        outline: none;
        font-size: 25px;
    }
  
    .active,
    .collapse:hover {
        background-color: #438a5e;
    }
  
    .text {
        background-color: #e1ffc2;
        display: none;
        font-size: 20px;
    }


  

    GeeksforGeeks
    
        Open Collapsible section
    
      
    
        How to create a collapsible 
        section using CSS and JavaScript?
    
  
    
        var btn = document
            .getElementsByClassName("collapse");
  
        btn[0].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
  
    

  
                    

输出：

• 折叠：
  
• 扩展：