如何让 Bootstrap Collapse 首先隐藏内容？

Question

我在 Bootstrap 首先折叠隐藏内容时遇到问题？现在我的代码会直接显示标题和内容，我只想先显示标题。

下面是我的编码：

   <div class="row">
    <div class="col-md-12">
      <div class="box box-success box-solid">
        <div class="box-header with-border">
          <h3 class="box-title">Expandable</h3>

           <div class="box-tools pull-right">
           <button type="button" class="btn btn-default btn-xs collapse-box" data-widget="collapse"> 
     <i class="fa fa-minus"></i>
            </button>
          </div>
          <!-- /.box-tools -->
        </div>
        <!-- /.box-header -->
       <div id="collapse4" class="body collapse in" style="overflow: auto;" aria-expanded="true">
         A cryptocurrency (or crypto currency) is a digital asset designed to work as a medium of exchange that uses strong cryptography to secure financial transactions, control the creation of additional units, and verify the transfer of assets.
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->

    <!-- /.col -->

    <!-- /.col -->

    <!-- /.col -->
  </div>

输出结果如下：

实际上我想显示输出隐藏内容如下图，当我点击"plus"按钮时会显示内容：

任何人都可以指导我哪里错了？谢谢。

正确答案：

Answer 1

像这样更改您的代码：-

<button type="button" class="btn btn-default btn-xs collapse-box" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-minus"></i></button>

 <div id="collapseExample" class="collapse" style="overflow: auto;">
         A cryptocurrency (or crypto currency) is a digital asset designed to work as a medium of exchange that uses strong cryptography to secure financial transactions, control the creation of additional units, and verify the transfer of assets.
        </div>

试试这个

如何让 Bootstrap Collapse 首先隐藏内容？

How to make Bootstrap Collapse hide content at first?

html

button

expandable