是否可以在请求的页面中显示保存在不同文件中的折叠？

Question

假设我的索引中有一个带有 4 个按钮标签的导航栏，现在它们在不同的页面中显示内容，例如：按钮 1 将我发送到 page/button1page。php

我想做的是，将这 4 个页面整合到一个页面中，使用折叠，我只是不知道怎么做，现在我得到的只是显示 4 个不同的折叠，但每个折叠的代码是在同一个文件（我的索引）中，我想要分开，例如，当我按下按钮 1 时，我希望能够在同一页面（索引）内折叠显示内容，而不是去 index/button1page.php

这是我的测试代码，它适用于同一文件中的所有代码。

 <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1"
    aria-expanded="false" aria-controls="collapseExample" value="1" onclick="action(this.value)"
    href="collapse1.html#collapse1">
    Collapse 1 con button
</button>

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
    aria-expanded="false" aria-controls="collapseExample" value="2" onclick="action(this.value)">
    Collapse 2 con button
</button>

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3"
    aria-expanded="false" aria-controls="collapseExample" value="3" onclick="action(this.value)">
    Collapse 3 con button
</button>



<div class="collapse" id="collapse1">
    <div class="card card-body">
        Parrafo del collapse 1
    </div>
</div>

<div class="collapse" id="collapse2">
    <div class="card card-body">
        Parrafo del collapse 2
    </div>
</div>
<div class="collapse" id="collapse3">
    <div class="card card-body">
        Parrafo del collapse 3
    </div>
</div>
<script>
    function action(valor) {
        if (valor == 1) {
            document.getElementById("collapse1").style.display = "block";
            document.getElementById("collapse2").style.display = "none";
            document.getElementById("collapse3").style.display = "none";
        }
        else if (valor == 2) {
            document.getElementById("collapse2").style.display = "block";
            document.getElementById("collapse1").style.display = "none";
            document.getElementById("collapse3").style.display = "none";
        }
        else if (valor == 3) {
            document.getElementById("collapse3").style.display = "block";
            document.getElementById("collapse1").style.display = "none";
            document.getElementById("collapse2").style.display = "none";
        }
    }
</script>

Answer 1

你的问题没有说清楚，但据我了解，这会是你想要的吗？ example link

是否可以在请求的页面中显示保存在不同文件中的折叠？

Is it possible to show a collapse saved in a different file, in the page requested?

html

javascript

bootstrap-5