进度条隐藏内容并在折叠时显示它

<div class="progress-container">
  <div class="progress-bar"></div>
  <div class="hidden-content">
    <!-- 隐藏的内容 -->
  </div>
</div>

.progress-container {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #4caf50;
}

.hidden-content {
  display: none;
}

// 假设操作的进度范围是0-100
function updateProgress(progress) {
  var progressBar = document.querySelector('.progress-bar');
  progressBar.style.width = progress + '%';

  if (progress === 100) {
    var hiddenContent = document.querySelector('.hidden-content');
    hiddenContent.style.display = 'block';
  }
}

// 调用updateProgress函数更新进度条
updateProgress(50); // 更新进度为50%