htmlbuttonexpandable

How to make Bootstrap Collapse hide content at first?

I have facing problem to make Bootstrap Collapse hide content at first? Now my coding will direct show the title and the content, I want just to show the title first.

Below is my coding:

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

The output show like the below:

enter image description here

Actually I want show the output hide content like the below picture,when I click the "plus"button then will show the content:

enter image description here

Anyone can guide me which part I get wrong? Thanks.

Correct Answer:

enter image description here

Solution

  • Change your code like this :- 

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

    Try this