如何在Elementor中通过按钮隐藏多分区仅显示单分区（非手风琴组件）

• 第一步：给对应按钮添加自定义关联属性
  打开Elementor编辑器，选中每个触发按钮，进入「高级」选项卡，找到「自定义属性」配置项，依次为每个按钮添加属性：
  对应#section1的按钮填写 target|section1
  对应#section2的按钮填写 target|section2
  对应#section3的按钮填写 target|section3
  所有待切换的分区保持原有ID#section1、#section2、#section3不变即可。

• 第二步：添加全局切换JS代码
  将以下代码添加到Elementor页面的「自定义HTML」组件中，或者网站全局自定义代码的页脚位置：

// 等待页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 定义所有待切换分区的选择器
  const sections = document.querySelectorAll('#section1, #section2, #section3');
  // 定义所有带target属性的触发按钮
  const toggleBtns = document.querySelectorAll('[data-target]');

  // 初始化：默认隐藏所有分区，可自行修改默认展示的分区
  sections.forEach(section => section.style.display = 'none');
  // 如果需要默认展示第一个分区，打开下一行注释
  // sections[0].style.display = 'block';

  // 给所有按钮绑定点击事件
  toggleBtns.forEach(btn => {
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      // 获取当前按钮对应的分区ID
      const targetId = this.dataset.target;
      // 先隐藏所有分区
      sections.forEach(section => section.style.display = 'none');
      // 显示目标分区
      document.getElementById(targetId).style.display = 'block';
    });
  });
});

如果后续需要新增更多切换分区，只需给所有待切换分区统一添加自定义类名toggle-section，将JS中sections的选择器替换为document.querySelectorAll('.toggle-section')，新增按钮按规则添加data-target属性即可，无需修改其他逻辑。

• 可选优化：添加过渡动画效果
  如果需要切换时的淡入效果，可以添加以下CSS代码到页面自定义CSS中：

#section1, #section2, #section3 {
  transition: opacity 0.3s ease;
}
#section1.hide, #section2.hide, #section3.hide {
  opacity: 0;
  display: none;
}

对应修改JS里的隐藏显示逻辑为切换hide类即可实现平滑过渡。

内容的提问来源于stack exchange，提问作者Tariq Mahmoud Abdelhaq