启动折叠切换显示/隐藏在3列没有手风琴

Bootstrap Collapse toggle show/hide in 3 column WITHOUT an accordion

本文关键字：3列 手风琴 隐藏 折叠 显示 启动      更新时间：2023-09-26

我遇到了这个问题。我需要使用js show &隐藏函数做什么引导手风琴函数但我不能使用手风琴因为我需要按钮在一个3列组&把折线调到全宽。目前，当我切换一个，它显示&把那个藏起来。我需要它来显示当前的一个&把剩下的藏起来。的帮助!

http://jsfiddle.net/Lowdl/pruggwqk/2/

    <div class="itl">
      <div class="container">
        <div class="row">
<div class="col-md-4" id="accordion">
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseInvest" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseInvest">Find out more</button>
</div>
<div class="col-md-4 green">
<button type="button" class="btnGreen" data-toggle="collapse" data-target="#collapseTrust" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseTrust">Find out more</button>
</div>
<div class="col-md-4">
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseLead" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseLead">Find out more</button>
</div>
            </div>
          </div>
    </div>
<div id="collapseInvest" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</P>
  </div>
<div id="collapseTrust" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>
  </div>
  <div id="collapseLead" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>
  </div>
</div>

你需要分组。这就是你想要的吗?

http://jsfiddle.net/alexqoliveira/pruggwqk/6/

    <div class="col-md-4"  >
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseInvest" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseInvest">Find out more</button>
</div>
<div class="col-md-4 green">
<button type="button" class="btnGreen" data-toggle="collapse" data-target="#collapseTrust" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseTrust">Find out more</button>
</div>
<div class="col-md-4">
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseLead" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseLead">Find out more</button>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
<div id="collapseInvest" class="collapse in">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</P>
  </div>
<div id="collapseTrust" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>
  </div>
  <div id="collapseLead" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>
  </div>
</div>
</div>
</div>
相关文章：