Bootstrap 3 data-parent not working for button and target when they are not together

Question

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

Answer 1

Never mind; I have succseeded using this ansewr Bootstrap 3 collapse accordion: collapse all works but then cannot expand all while maintaining data-parent

lots of changes were required but starting from the provided files there it works nicely!