Bootstrap 3數據父級在按鈕和目標不在一起時不起作用

Question

我正在嘗試使用於折疊它們的按鈕下面的可折疊元素（生物課）

我在這些按鈕的下面還有一個三角形類，其作用方式應與我嘗試將每個組包裝在面板類中的常規手風琴相同，但即使對於三角形類也不起作用

折疊本身可以工作，但是不起作用的是我想在擴展另一個元素時隱藏所有其他擴展的元素，我猜應該使用data-parent，但是我無法使其正常工作。

 <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個具有成功數字的相同生物div

我還將在所有這些代碼下面再包含3個完全相同的代碼，如果我在下面打開一個元素，可能還需要關閉這里的所有元素，但尚未確定

Answer 1

沒關系; 我已成功使用此ansewr Bootstrap 3折疊手風琴：折疊所有作品，但在保持數據父級的同時無法展開所有作品

需要進行很多更改，但是從提供的文件開始，它可以很好地工作！