如何实现页面内链接跳转并自动展开指定Collapsible文本？

没问题，完全可以基于你现有的代码实现这个功能，我帮你梳理下具体的修改步骤：

第一步：修复元素ID的小问题 #

先看你的HTML里的按钮ID：

<button class="collapsible" id="collapsible ">Unfolds text</button>

这里id="collapsible "后面多了个空格，这会导致链接href="#collapsible"找不到目标元素，先把空格去掉，改成：

<button class="collapsible" id="collapsible">Unfolds text</button>

第二步：扩展JavaScript逻辑 #

我们需要添加两个关键逻辑：

• 处理链接点击事件，跳转后触发展开
• 处理页面加载时如果URL带有目标hash，自动展开对应元素

修改后的完整JS代码如下：

var coll = document.getElementsByClassName("collapsible");
var i;

// 原有的折叠/展开逻辑
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    toggleCollapsible(this);
  });
}

// 封装展开/折叠的逻辑为独立函数，方便复用
function toggleCollapsible(element) {
  element.classList.toggle("active");
  var content = element.nextElementSibling;
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
  }
}

// 处理链接点击：跳转后展开目标元素
document.querySelectorAll('a[href="#collapsible"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 先阻止默认跳转行为
    const target = document.getElementById(this.getAttribute('href').slice(1));
    if (target) {
      // 先展开元素
      if (!target.classList.contains('active')) {
        toggleCollapsible(target);
      }
      // 再滚动到目标位置
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
});

// 处理页面加载时的hash：如果URL带有#collapsible，自动展开
window.addEventListener('load', function() {
  const hash = window.location.hash.slice(1);
  if (hash === 'collapsible') {
    const target = document.getElementById(hash);
    if (target && !target.classList.contains('active')) {
      toggleCollapsible(target);
    }
  }
});

第三步：保留原有CSS和HTML（除了ID修复） #

你的CSS代码不需要改动，HTML里的链接可以正常保留：

<a href="#collapsible">Link to the collapsible text</a>

为什么这样修改？ #

1. 封装toggle函数：把原来的点击逻辑抽成独立函数，这样不管是按钮点击、链接点击还是页面加载，都能复用同一个展开/折叠逻辑，避免代码重复。
2. 链接点击处理：先阻止默认跳转，先确保元素展开，再平滑滚动到目标位置，体验更流畅。
3. 页面加载处理：如果用户直接打开带#collapsible的URL，页面加载时会自动展开对应的折叠面板，提升可用性。

你可以把这些修改替换到你的代码里，测试一下，点击链接就会自动滚动到折叠面板并展开它了。

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