Avada主题：通过按钮展开/折叠Tabs或Toggles

当然可以实现！Avada主题的Tabs（标签页）和Toggles（切换面板）本质上是基于jQuery构建的，所以我们完全可以通过自定义代码，让外部按钮/链接触发它们的展开或折叠，比锚点更灵活可控。下面分两种情况具体说明：

一、触发Toggle（切换面板）的展开/折叠 #

步骤1：给目标元素添加自定义类名 #

首先，给你想要控制的Toggle面板添加一个唯一的自定义类（比如my-target-toggle），同时给外部的触发按钮也加一个自定义类（比如toggle-trigger-btn）。你可以在Avada编辑器的元素设置里找到“CSS类”选项来添加。

步骤2：添加自定义JS代码 #

打开Avada主题选项的「Custom JS」面板（或者把代码放到子主题的JS文件中），插入以下代码：

jQuery(document).ready(function($) {
  // 绑定外部按钮的点击事件
  $('.toggle-trigger-btn').on('click', function(e) {
    e.preventDefault(); // 阻止按钮默认跳转行为（如果是链接的话）
    // 找到目标Toggle的标题栏，模拟点击来切换状态
    $('.my-target-toggle .fusion-toggle-heading').click();
  });
});

原理很简单：Avada的Toggle是通过点击标题栏（.fusion-toggle-heading）来切换展开/折叠状态的，我们直接模拟这个点击动作，就能完美复用主题自带的动画和状态逻辑。

二、触发Tabs（标签页）的切换 #

步骤1：添加自定义类名 #

同样，给目标Tab的标签项（比如你想切换到的那个Tab）添加自定义类（比如my-target-tab），给外部触发按钮加类（比如tab-trigger-btn）。

步骤2：添加自定义JS代码 #

同样在「Custom JS」里插入以下代码：

jQuery(document).ready(function($) {
  $('.tab-trigger-btn').on('click', function(e) {
    e.preventDefault();
    // 触发目标Tab标签的点击事件，切换到对应面板
    $('.my-target-tab').click();
  });
});

如果你不想用类名，也可以通过Tab的索引来定位（索引从0开始），比如要切换到第二个Tab，代码可以改成：

$('.fusion-tabs li:eq(1)').click();

一些注意事项 #

• 确保代码在jQuery加载之后执行：Avada默认会加载jQuery，所以直接放到主题的Custom JS里是没问题的。
• 类名尽量唯一：避免和页面上其他元素的类名冲突，建议用更具辨识度的命名，比如product-details-toggle-trigger。
• 子主题优化：如果用子主题，建议把JS代码放到子主题的js/custom.js文件中，然后通过子主题的functions.php注册加载，这样主题更新时不会丢失自定义代码。

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