Javascript 显示元素时更改div的位置

我有3个标题，下面有一个按钮，显示更多关于主题的信息

我制作了一个脚本来在单击按钮时显示/隐藏div。当我在一个小设备上时，div会显示在主题下方（就像我想要的那样），正如您在这里看到的：

但是，当我在桌面上时，主题彼此相邻，显示的div会将另一个主题推到底部

我想让表演部门在这三个主题之下

这是错误的：

怎么做的好主意

另外，也是一种一次只显示一个div的方法，因此当我打开一个新div时，前一个div应该关闭

HTML:

将带有“服务详情”类的div放入col-md-4中

使用引导手风琴关闭上一个分区，打开新分区

---

以下代码不需要任何额外的JavaScript，因为它仅使用本机Bootstrap 4类就可以完成任务，我相信它可以满足您的需要。（您可能想修复一些小问题，但一般来说，应该是这样的）：

总是准时
查看更多
总是准时
同一天，我们将迎来一位杰出的献祭者，他将为我们的献祭者带来巨大的劳动和财富。



两人或两人在一个充满激情的精英阶层中相互指责

信任
查看更多
信任
同一天，我们将迎来一位杰出的献祭者，他将为我们的献祭者带来巨大的劳动和财富。



两人或两人在一个充满激情的精英阶层中相互指责

全天候支持
查看更多
全天候支持
同一天，我们将迎来一位杰出的献祭者，他将为我们的献祭者带来巨大的劳动和财富。



两人或两人在一个充满激情的精英阶层中相互指责

您正在使用引导网格系统。 分区划分不合理 我刚刚在'col-md-4'中包含了所有的“服务细节”类

这是正确的代码：-

<div class="container">
<div class="row">
    <div class="col-md-4 col-12 text-center mt-5">
        <img src="images/index/tijd.png" alt="time" class="mb-5 img-fluid">
        <h2>Always on time</h2>
        <button class="btn mybtn mt-2" onclick="showInfo('tijd')">See more</button>
    </div>

    <div class="col-md-4">
    <div class="service-detail mt-5 service-detail" id="tijd">
        <div class="col-12 col-md-8 offset-md-2 text-center">
            <h1 class="mt-5"><img src="images/index/tijd.png" alt="" class="mr-5">Always on time</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                labore
                et dolore magna aliqua consectetur adipiscing elit.
                <br>
                <br>
                Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
            <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('tijd')">See less</button>
        </div>
    </div>
</div>
    <div class="col-md-4 col-12 text-center mt-5">
        <img src="images/index/trust.png" alt="trust" class="mb-5 img-fluid">
        <h2>Trust</h2>
        <button class="btn mybtn mt-2" onclick="showInfo('trust')">See more</button>
    </div>
    <div class="col-md-4">
    <div class="service-detail mt-5 service-detail" id="trust">
        <div class="col-12 col-md-8 offset-md-2 text-center">
            <h1 class="mt-5"><img src="images/index/trust.png" alt="" class="mr-5">Trust</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                labore
                et dolore magna aliqua consectetur adipiscing elit.
                <br>
                <br>
                Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
            <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('trust')">See less</button>
        </div>
    </div>
    </div>
    <div class="col-md-4 col-12 text-center mt-5 mb-5">
        <img src="images/index/24.png" alt="24/7" class="mb-5 img-fluid">
        <h2>24/7 support</h2>
        <button class="btn mybtn mt-2" onclick="showInfo('24')">See more</button>
    </div>
</div>
<div class="col-md-4">
<div class="service-detail mt-5 service-detail" id="24">
    <div class="col-12 col-md-8 offset-md-2 text-center">
        <h1 class="pt-5"><img src="images/index/24.png" alt="" class="mr-5">24/7 support</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore
            et dolore magna aliqua consectetur adipiscing elit.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
        <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('24')">See less</button>
    </div>
</div>
</div>

总是准时
查看更多
总是准时
洛雷姆·伊普苏姆·多洛尔·西特（Lorem ipsum Door sit amet）是一位杰出的建筑设计师，他是一位临时建筑设计师
劳尔
这是一个伟大的事业。




两人或两人在一个充满激情的精英阶层中相互指责

少看
信任
查看更多
信任
洛雷姆·伊普苏姆·多洛尔·西特（Lorem ipsum Door sit amet）是一位杰出的建筑设计师，他是一位临时建筑设计师
劳尔
这是一个伟大的事业。




两人或两人在一个充满激情的精英阶层中相互指责

少看
全天候支持
查看更多
全天候支持
洛雷姆·伊普苏姆·多洛尔·西特（Lorem ipsum Door sit amet）是一位杰出的建筑设计师，他是一位临时建筑设计师
劳尔
这是一个伟大的事业。




两人或两人在一个充满激情的精英阶层中相互指责

少看

---

您应该看看这个：并发布更少的代码。更少的代码=更多的答案。你最后一个问题是什么意思？你想一次只显示一个div，隐藏其他div吗？或者你说的是在divs重叠中“关闭”并将内容隐藏在“查看更多”下？@ThomasDarvik，隐藏另一个，在timeUpdate链接中只显示一个，404页找不到。试试这个谢谢，我不知道thad引导类。我刚刚更新了我的代码段，请查看。现在，它的工作原理完全符合您的预期。一切都是通过本机引导类来完成的（不需要额外的JavaScript），并且一切都是完全响应的。响应性是通过order类实现的，该类允许根据屏幕大小移动div。阅读代码中的注释以更好地了解发生了什么。您是否尝试了我更新的代码？它能按你想要的方式工作吗？考虑一下我的答案是否正确。

function showInfo(id) {
  var a = document.getElementById(id);
  if (a.style.display === "block") {
    a.style.display = "none";
  } else {
    a.style.display = "block";
  }
}

<div class="container">
<div class="row">
    <div class="col-md-4 col-12 text-center mt-5">
        <img src="images/index/tijd.png" alt="time" class="mb-5 img-fluid">
        <h2>Always on time</h2>
        <button class="btn mybtn mt-2" onclick="showInfo('tijd')">See more</button>
    </div>

    <div class="col-md-4">
    <div class="service-detail mt-5 service-detail" id="tijd">
        <div class="col-12 col-md-8 offset-md-2 text-center">
            <h1 class="mt-5"><img src="images/index/tijd.png" alt="" class="mr-5">Always on time</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                labore
                et dolore magna aliqua consectetur adipiscing elit.
                <br>
                <br>
                Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
            <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('tijd')">See less</button>
        </div>
    </div>
</div>
    <div class="col-md-4 col-12 text-center mt-5">
        <img src="images/index/trust.png" alt="trust" class="mb-5 img-fluid">
        <h2>Trust</h2>
        <button class="btn mybtn mt-2" onclick="showInfo('trust')">See more</button>
    </div>
    <div class="col-md-4">
    <div class="service-detail mt-5 service-detail" id="trust">
        <div class="col-12 col-md-8 offset-md-2 text-center">
            <h1 class="mt-5"><img src="images/index/trust.png" alt="" class="mr-5">Trust</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                labore
                et dolore magna aliqua consectetur adipiscing elit.
                <br>
                <br>
                Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
            <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('trust')">See less</button>
        </div>
    </div>
    </div>
    <div class="col-md-4 col-12 text-center mt-5 mb-5">
        <img src="images/index/24.png" alt="24/7" class="mb-5 img-fluid">
        <h2>24/7 support</h2>
        <button class="btn mybtn mt-2" onclick="showInfo('24')">See more</button>
    </div>
</div>
<div class="col-md-4">
<div class="service-detail mt-5 service-detail" id="24">
    <div class="col-12 col-md-8 offset-md-2 text-center">
        <h1 class="pt-5"><img src="images/index/24.png" alt="" class="mr-5">24/7 support</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore
            et dolore magna aliqua consectetur adipiscing elit.
            <br>
            <br>
            Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
        <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('24')">See less</button>
    </div>
</div>
</div>