如何在Tailwind Accordion中提交表单后跳转至下一个折叠面板？

使用Tailwind构建折叠面板（Accordion）并引入Flowbite实现交互，在第一个面板的表单填写完成后，点击「NEXT」按钮希望打开第二个面板，但使用<a href="#accordion-collapse-body-2">的方式无效，如何实现该需求？

解决方案 #

Flowbite的折叠面板通过自身JS逻辑管理显示状态，直接锚点跳转无法触发其交互机制，以下是两种可行实现方式：

方式1：模拟触发第二个面板的按钮点击 #

这是最简便的方案，直接复用Flowbite已绑定的按钮交互逻辑：

1. 将原有的<a>标签替换为按钮，避免锚点跳转干扰：

   <button type="button" id="nextStepBtn" class="text-blue-600 hover:text-blue-800">NEXT</button>
   

2. 在页面末尾添加自定义JS代码，监听按钮点击并触发第二个面板的展开按钮：

   document.getElementById('nextStepBtn').addEventListener('click', function(e) {
     e.preventDefault();
     // 触发第二个面板的按钮点击事件
     document.querySelector('[data-accordion-target="#accordion-collapse-body-2"]').click();
     // 可选：折叠第一个面板
     document.querySelector('[data-accordion-target="#accordion-collapse-body-1"]').click();
   });
   

方式2：调用Flowbite Accordion实例方法 #

如果你需要更精细的控制，可以直接调用Flowbite的Accordion实例方法：

// 获取Accordion实例
const accordion = new Flowbite.Accordion(document.getElementById('accordion-collapse'));
// 展开第二个面板（索引从0开始）
accordion.expand(1);
// 可选：折叠第一个面板
accordion.collapse(0);

将这段代码绑定到NEXT按钮的点击事件即可。

修改后的完整代码 #

<div id="accordion-collapse" data-accordion="collapse">
  <h2 id="accordion-collapse-heading-1">
    <button type="button"
      class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium text-left border border-gray-200 dark:border-gray-700 border-b-0 text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-t-xl"
      data-accordion-target="#accordion-collapse-body-1" aria-expanded="true"
      aria-controls="accordion-collapse-body-1">
      <span>STEP 1</span>
      <svg data-accordion-icon class="w-6 h-6 shrink-0 rotate-180" fill="currentColor" viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd"
          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
          clip-rule="evenodd"></path>
      </svg>
    </button>
  </h2>
  <div id="accordion-collapse-body-1" aria-labelledby="accordion-collapse-heading-1">
    <div class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900 border-b-0">
      <form>
        <div class="grid gap-6 mb-6 md:grid-cols-2">
          <div>
            <input type="text" id="first_name"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              placeholder="NAME" required>
          </div>
          <div>
            <input type="text" id="last_name"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              placeholder="LAST NAME" required>
          </div>      
        </div>              
        <button type="button" id="nextStepBtn" class="text-blue-600 hover:text-blue-800">NEXT</button>
      </form>
    </div>
  </div>
  <h2 id="accordion-collapse-heading-2">
    <button type="button"
      class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 border-b-0 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
      data-accordion-target="#accordion-collapse-body-2" aria-expanded="false"
      aria-controls="accordion-collapse-body-2">
      <span>STEP 2</span>
      <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd"
          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
          clip-rule="evenodd"></path>
      </svg>
    </button>
  </h2>
  <div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
    <div class="p-5 border border-gray-200 dark:border-gray-700 border-b-0">
      <p>CONTENT HERE</p>
    </div>
  </div>
</div>
<script src="https://unpkg.com/flowbite@1.3.3/dist/flowbite.js"></script>
<script>
  document.getElementById('nextStepBtn').addEventListener('click', function(e) {
    e.preventDefault();
    // 展开第二个面板
    document.querySelector('[data-accordion-target="#accordion-collapse-body-2"]').click();
    // 折叠第一个面板
    document.querySelector('[data-accordion-target="#accordion-collapse-body-1"]').click();
  });
</script>

内容的提问来源于stack exchange，提问作者streaming-coc