如何实现点击CSS按钮后显示包含图片的指定div区块？

嘿，这个需求很容易搞定，咱们分三步来实现：

1. 给现有HTML添加上切换按钮 #

先把按钮放在Information Pane标题下方、图表区块上方，布局更合理，也符合用户的操作预期：

<div id="table_and_dqinfo" class="table_and_dqinfo">
  <div id="dqdiv" class="dqinfo">
    <h4 class="centertext">Information Pane</h4>
    <!-- 新增的切换按钮 -->
    <button id="toggleGraphBtn" class="toggle-btn">显示图表</button>
    <div id="dqdiv_volgraph">
      <!-- 这里是你的图片元素 -->
      <img src="你的图片链接地址" alt="Volume Graph">
    </div>
  </div>
</div>

2. 用CSS默认隐藏图表区块 #

给dqdiv_volgraph设置默认隐藏，同时给按钮加些基础样式，让它看起来更贴合网站风格：

/* 默认隐藏图表区块 */
#dqdiv_volgraph {
  display: none;
  /* 可选：添加过渡动画，让显示/隐藏更平滑 */
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* 显示图表时的样式（配合动画） */
#dqdiv_volgraph.show {
  display: block;
  opacity: 1;
}

/* 按钮的基础样式，可根据自己的需求修改 */
.toggle-btn {
  padding: 8px 18px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  background-color: #2563eb;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.toggle-btn:hover {
  background-color: #1d4ed8;
}

3. 用JavaScript实现点击切换逻辑 #

给按钮绑定点击事件，切换图表的显示状态，同时更新按钮文字提升用户体验：

// 获取DOM元素
const toggleBtn = document.getElementById('toggleGraphBtn');
const volGraphDiv = document.getElementById('dqdiv_volgraph');

// 绑定点击事件
toggleBtn.addEventListener('click', function() {
  // 切换显示类
  volGraphDiv.classList.toggle('show');
  // 根据状态修改按钮文字
  this.textContent = volGraphDiv.classList.contains('show') ? '隐藏图表' : '显示图表';
});

额外说明 #

这种用CSS类控制显示的方式，比直接修改style.display更灵活——后续如果要调整显示的动画、样式，只需要修改CSS即可，JS只负责状态切换，代码逻辑更清晰。

这样就能实现你要的效果：页面加载时图表默认隐藏，点击按钮才显示，再次点击又会隐藏～

内容的提问来源于stack exchange，提问作者Dong Hui