因此，我尝试创建一个折叠框，如下图所示。我需要显示几个这样的框，但希望在打开一个折叠框时隐藏其他框。尝试使用引导程序折叠，但看起来DOM结构是 * 必需的 *：https://github.com/twbs/bootstrap/issues/10966
有没有其他方法可以在没有javascript的情况下实现同样的行为？

这是我的标记：

<div class="col-xs-12 col-sm-8 col-lg-10">
    <div class="row">
        <div class="col-xs-4 col-lg-2"><span class="text-uppercase">Var dates</span><span>$600.00</span><span><a data-target="#moreInfoPastAmount" data-toggle="collapse" aria-expanded="true" aria-controls="moreInfoPastAmount" data-parent="#moreInfo">+Past Amount</a></span></div>
        <div class="col-xs-4 col-lg-2"><span class="text-uppercase">Var dates</span><span>$400.00</span><span><a data-target="#moreInfoLateFees" data-toggle="collapse" aria-expanded="true" aria-controls="moreInfoLateFees" data-parent="#moreInfo">+Late Fees</a></span></div>
        <div class="col-xs-4 col-lg-2"><span class="text-uppercase">Mar 26</span><span>$200.00</span><span>Current Due</span></div>
    </div>
    <div id="moreInfo" class="row">
        <div class="col-xs-12">
            <div id="moreInfoPastAmount" class="arrow-box collapse in" aria-expanded="true">
                <div class="arrow left"></div>
                <p>Content goes here</p>
            </div>
            <div id="moreInfoLateFees" class="arrow-box collapse in" aria-expanded="true">
                <div class="arrow left"></div>
                <p>Content goes here</p>
            </div>
        </div>
    </div>
</div>