Bootstrap折叠手风琴，头部和身体分开

Question

我想用bootstrap做个手风琴。但是头部和身体必须分开。

这是我的代码：

<div class="panel-group" id="accordion">
    <h4>
    number of invoices : 
    <span  data-toggle="collapse" data-parent="#accordion" href="#day">Day</span> | 
    <span  data-toggle="collapse" data-parent="#accordion" href="#week">Week</span> | 
    <span  data-toggle="collapse" data-parent="#accordion" href="#month">Month</span>
    </h4>

    <p id="day" class="panel-collapse collapse in">Da </p>
    <p id="week" class="panel-collapse collapse">Week</p>
    <p id="month" class="panel-collapse collapse">Month</p>
</div>

谢谢您的时间。

Answer 1

希望这会有所帮助。

  <div id="accordion">
  <p>
      <button class="btn btn-primary" data-toggle="collapse" data-target="#day" aria-expanded="false">
          Day
      </button>
      <button class="btn btn-primary collapsed" data-toggle="collapse" data-target="#week" aria-expanded="false" >
          Week
      </button>
      <button class="btn btn-primary collapsed" data-toggle="collapse" data-target="#month" aria-expanded="false" >
          Month
      </button>                           
  </p>
  <div class="card">    
    <div id="day" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Day
      </div>
    </div>
  </div>

  <div class="card">
    <div id="week" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Week
      </div>
    </div>
  </div>

  <div class="card">
    <div id="month" class="collapse" data-parent="#accordion">
      <div class="card-body">
        month
      </div>
    </div>
  </div>
</div>