Bootstrap 4 COLLAPSAE // hide other collapsable divs - css

Question

I am trying to make 4 pictures, when clicked on, open collapsable div. I got that part, but the problem is that when I click on the second picture the content from the first image are still visible. They would need to hide
I have tried the solutions from here and from all over of internet, but with no success.
jsfiddle: https://jsfiddle.net/pqhz5jLa/
<div class="row">
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%">
</div>
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%">
</div>
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%" >
</div>
<div class="col" role="button" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png" width="100%" >
</div>
</div>
<br>
<div class="collapse" id="collapseExample1" >
<div class="card card-body">
1
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
2
</div>
</div>
<div class="collapse" id="collapseExample3">
<div class="card card-body">
3
</div>
</div>
<div class="collapse" id="collapseExample4">
<div class="card card-body">
4
</div>
</div>
Thank you

Answer 1

You can fix this problem with using javascript. First of all I would give each collapsible div a own class
<div class="collapse collapseExample1" id="collapseExample1" >
<div class="card card-body">
1
</div>
</div>
<div class="collapse collapseExample2" id="collapseExample2">
<div class="card card-body">
2
</div>
</div>
<div class="collapse collapseExample3" id="collapseExample3">
<div class="card card-body">
3
</div>
</div>
<div class="collapse collapseExample4" id="collapseExample4">
<div class="card card-body">
4
</div>
</div>
and then this js should fix the problem.
$(document).ready(function(){
$(".collapseExample1").on('show.bs.collapse', function(){
$(".collapseExample2").collapse("hide");
$(".collapseExample3").collapse("hide");
$(".collapseExample4").collapse("hide");
});
$(".collapseExample2").on('show.bs.collapse', function(){
$(".collapseExample1").collapse("hide");
$(".collapseExample3").collapse("hide");
$(".collapseExample4").collapse("hide");
});
$(".collapseExample3").on('show.bs.collapse', function(){
$(".collapseExample1").collapse("hide");
$(".collapseExample2").collapse("hide");
$(".collapseExample4").collapse("hide");
});
$(".collapseExample4").on('show.bs.collapse', function(){
$(".collapseExample1").collapse("hide");
$(".collapseExample2").collapse("hide");
$(".collapseExample3").collapse("hide");
});
});