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

Question

我首先遇到了让 Bootstrap Collapse 隐藏内容的问题？现在我的编码将直接显示标题和内容，我只想先显示标题。

下面是我的编码：

   <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>

输出显示如下：

实际上我想显示输出隐藏内容，如下图所示，当我单击“加号”按钮时，将显示内容：

任何人都可以指导我错了哪一部分？谢谢。

正确答案：

标签： htmlbuttonexpandable

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>

尝试这个