javascript - 显示元素时更改 div 的位置

Question

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

我制作了一个脚本来在单击按钮时显示/隐藏 div。当我在小型设备上时，div 显示在主题下方(就像我想要的那样)，您可以在此处看到:

This is correct on small devices

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

我想让 show div 位于 3 个主题的下方。

这是错误的:

This is wrong

How they all sould be

关于如何执行此操作的任何想法？

另外，这是一次只显示一个 div 的方法，所以当我打开一个新的 div 时，前一个应该关闭。

HTML:

 <!-- TOP 3 SERVICES -->
<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="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 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="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 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="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>

JS:

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

Answer 1

将类为“service-detail”的div放入col-md-4

使用 bootstrap accordion 关闭前一个 div，打开新的 div

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h