I am trying to make collapsable elements that are below the buttons used to collapse them (bio class)
I also have a triangle class right below those buttons that should act the same way like the regular accordion I have tried wrapping each group in the panel class but it doesn't work even for the triangle class
the collapsing itself works, but what doesn't work is that I want to hide all other expanded elements upon expanding another element, I'm guessing data-parent should be for this, but I can't get it to work.
<div class = "container" id = "members" style="text-align:center;">
<h1>THE TEAM</h1>
<h3>MEMBERS</h3>
<div class = "row">
<div class = "col-md-3 panel">
<input type="button" class= "circle" data-toggle="collapse" data-target="#triangle1,#bio1" data-parent="#members">
<p>dr. sc. Name Lastname</p><div class="collapse" id="triangle1"><img src="Assets/myassets/triangle.png"/></div>
</div>
<div class = "col-md-3 panel">
<input type="button" class= "circle" data-toggle="collapse" data-target="#triangle2,#bio2" data-parent="#members">
<p>dr. sc. Name Lastname</p><div class="collapse" id="triangle2"><img src="Assets/myassets/triangle.png"/></div>
</div>
<div class = "col-md-3 panel">
<input type="button" class= "circle" data-toggle="collapse" data-target="#triangle3,#bio3" data-parent="#members">
<p>dr. sc. Name Lastname</p><div class="collapse" id="triangle3"><img src="Assets/myassets/triangle.png"/></div>
</div>
<div class = "col-md-3 panel">
<input type="button" class= "circle" data-toggle="collapse" data-target="#triangle4,#bio4" data-parent="#members">
<p>dr. sc. Name Lastname</p><div class="collapse" id="triangle4"><img src="Assets/myassets/triangle.png"/></div>
</div>
</div>
<div class= "bio collapse" id="bio1">
<div class = "container container-large">
<div class = "row">
<div class = "col-md-9">
<h3>SHORT BIO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam ipsum at sapien faucibus eleifend.
Sed iaculis non orci eget suscipit. Etiam venenatis vitae neque vitae hendrerit.</p>
</div>
<div class = "col-md-3">
<h3>CONTACT</h3>
<a href = "#"><img src="Assets/myassets/fbandmail.png" style="margin-right: 15px;"/>name.lastname@mail.com</a>
<a href = "#"><img src="Assets/myassets/fbandmail2.png" style="margin-right: 15px;"/>fb.com/name.lastname</a>
</div>
</div>
</div>
</div>
3 more identical bio divs with succesive numbers
I'm also going to have 3 more of the exact same code below all this, and maybe I'll need to close all the elements here if I open an element below, that is not yet decided
