How to make Bootstrap Collapse hide content at first?

Question

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:

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

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

Correct Answer:

Aniket · Accepted Answer · 2019-10-31T08:04:08.007

0

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

edited Oct 31 '19 at 08:04

answered Oct 31 '19 at 07:43

Aniket

391
5
13

Thanks for your answer my question. But the content still show at first when I have removed the class. – Oct 31 '19 at 07:49
I have edited my answer. Please check it now and do let me know – Aniket Oct 31 '19 at 08:04
Your welcome if it works fine for you then you can accept this as an answer – Aniket Oct 31 '19 at 08:08
1 more question why my content words very small? – Oct 31 '19 at 08:09
maybe there is some styling in your body tag try to remove body class and see the output – Aniket Oct 31 '19 at 08:11
Can you guide me how to remove? You can see my question, I have upload the picture what I get the content size? – Oct 31 '19 at 08:14
`class="body collapse"` change this code to `class="collapse"` – Aniket Oct 31 '19 at 08:17
Yup, this class="body collapse" can make the content align, but if I put class="body collapse" ,it cannot hide the content at first. – Oct 31 '19 at 08:21
You have mentioned the same thing twice, can you explain it? – Aniket Oct 31 '19 at 08:46
Ok. First you code can hide the content, but the content align go to left. And just now I using your method class="body collapse" change this code to class="collapse", align can go to center, but the content cannot hide. – Oct 31 '19 at 08:51
Then this is the issue of styling to create you separate style for a different class in CSS and apply the CSS which are needed and add that class in the tag instead of adding a body class. – Aniket Oct 31 '19 at 09:02
Ok. I go to check first. Thanks a lot. – Oct 31 '19 at 09:12

How to make Bootstrap Collapse hide content at first?

1 Answers1