Currently, I have 3 titles each with a button underneath to reveal more information about the subject.
To toggle the visibility of the content, I have implemented a script that shows or hides the corresponding div when the button is clicked. On smaller devices, the div appears below the subject, as intended, as shown here:
However, on desktop devices where the subjects are displayed side by side, the shown div pushes the other subjects down, which is not the desired behavior.
I would like the displayed div to appear below all 3 subjects, rather than affecting the layout as shown here:
Any suggestions on how to achieve this?
Additionally, is there a way to ensure that only one div is visible at a time? Meaning, when a new div is opened, the previous one should automatically close.
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>
JavaScript:
function showInfo(id) {
var element = document.getElementById(id);
if (element.style.display === "block") {
element.style.display = "none";
} else {
element.style.display = "block";
}
}