显示元素时更改div的位置

Question

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

我制作了一个脚本来显示/隐藏点按钮上的div。当我在一个小设备上时，div显示在主题下面（就像我想要的那样），你可以在这里看到：

This is correct on small devices

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

我想将节目div放在3个主题之下。

这是错误的：

This is wrong

How they all sould be

关于如何做到这一点的想法？

另外，这是一种只显示一个div的方法，所以当我打开一个新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

在col-md-4

中加入div“service-detail”类

使用bootstrap手风琴关闭前一个div，打开新的

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

Answer 2

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

<!-- TOP 3 SERVICES -->
<div class="container">
    <div class="row" id="myAccordion" data-children=".item">
        <div class="col-12 col-md-4 text-center mt-5 order-1 order-md-1">
            <img src="images/index/tijd.png" alt="time" class="mb-5 img-fluid">
            <h2>Always on time</h2>
            <button class="btn mybtn mt-2 mb-2 mb-md-5" data-toggle="collapse" data-parent="#myAccordion" data-target="#panel1" aria-expanded="false" aria-controls="panel1">See more</button>
        </div><!-- col -->

        <div class="item order-2 order-md-4"><!-- order-2 moves this div to 2nd position on small screens i.e. underneath the previous -->
            <div class="col-12 col-md-8 offset-md-2 text-center collapse service-detail mt-5" id="panel1"><!-- for toggle functionality this column needs to be wrapped in a div with the .item class -->
                <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><!-- col -->
        </div><!-- item -->

        <div class="col-12 col-md-4 text-center mt-5 mt-md-5 order-3 order-md-2"><!-- order-3 is what makes it show in the desired order on smaller screens; order-md-2 means it's gonna come in second place on medium screens -->
            <img src="images/index/trust.png" alt="trust" class="mb-5 img-fluid">
            <h2>Trust</h2>
            <button class="btn mybtn mt-2 mb-2 mb-md-5" data-toggle="collapse" data-parent="#myAccordion" data-target="#panel2" aria-expanded="false" aria-controls="panel2">See more</button>
        </div><!-- col -->

        <div class="item order-4 order-md-5"><!-- order-4 moves this div to 4th position on small screens i.e. underneath the previous -->
            <div class="col-12 col-md-8 offset-md-2 text-center collapse service-detail mt-5" id="panel2"><!-- for toggle functionality this column needs to be wrapped in a div with the .item class -->
                <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><!-- col -->
        </div><!-- item -->

        <div class="col-12 col-md-4 text-center mt-5 order-5 order-md-3"><!-- order-5 is what makes it show in the desired order on smaller screens; order-md-3 means it's gonna come in 3rd place on medium screens -->
            <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 mb-2 mb-md-5" data-toggle="collapse" data-parent="#myAccordion" data-target="#panel3" aria-expanded="false" aria-controls="panel3">See more</button>
        </div><!-- col -->

        <div class="item order-6"><!-- order-6 is still necessary here because otherwise this div would show on top of all others -->
            <div class="col-12 col-md-8 offset-md-2 text-center collapse service-detail mt-5" id="panel3"><!-- for toggle functionality this column needs to be wrapped in a div with the .item class -->
                <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><!-- col -->
        </div><!-- item -->

    </div><!-- .row #myAccordion -->
</div><!-- container -->

要进一步定制，您应该阅读此页面上的文档：

https://getbootstrap.com/docs/4.0/components/collapse/

Answer 3

您正在使用自举网格系统。 div没有正确划分 我刚刚在'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>