CSS折叠面板实现技巧分享

  

    标题 1
    

      
这里是第一段内容，点击标题可展开或收起。
    
  

  

    标题 2
    

      
这里是第二段内容。
    
  

.accordion {
  max-width: 600px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  width: 100%;
  text-align: left;
  background-color: #f7f7f7;
  padding: 15px;
  border: none;
  outline: none;
  font-size: 16px;
  cursor: pointer;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.accordion-header:hover {
  background-color: #e9e9e9;
}

.accordion-body {
  padding: 0 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #fff;
}

document.querySelectorAll('.accordion-header').forEach(button => {
  button.addEventListener('click', function() {
    const body = this.nextElementSibling;
    
    if (body.style.maxHeight) {
      body.style.maxHeight = null;
    } else {
      body.style.maxHeight = body.scrollHeight + "px";
    }
  });
});

.accordion-header::after {
  content: '+';
  float: right;
}

.accordion-header.active::after {
  content: '−';
}

this.classList.toggle('active');