How to start animation of collapsed box (adminlte) immediately?

I'm using collapsed box from adminlte template. I have a problem that first time when I want to show this box (after clicking on -), animation doesn't work and content is showed immediately. It start working after another clicking. Can anyone help me to initialize animation immediately?...

jsfiddle

<div class="box collapsed-box">
  <div class="box-header with-border">
    <h3 class="box-title">Default Box Example</h3>
    <div class="box-tools pull-right">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
     <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
     </button>
    </div>
    <!-- /.box-tools -->
  </div>
  <!-- /.box-header -->
  <div class="box-body">
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  </div>
  <!-- /.box-body -->
  <div class="box-footer">
    The footer of the box
  </div>
  <!-- box-footer -->
</div>
<!-- /.box -->

Solution

Here you go with a solution https://jsfiddle.net/ocoj8g35/4/

<link href="https://cdn.rawgit.com/almasaeed2010/AdminLTE/6157c7bc/dist/css/AdminLTE.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/almasaeed2010/AdminLTE/6157c7bc/dist/js/adminlte.min.js"></script>
<div class="box collapsed-box">
  <div class="box-header with-border">
    <h3 class="box-title">Default Box Example</h3>
    <div class="box-tools pull-right">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
     <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-plus"></i>
     </button>
    </div>
    <!-- /.box-tools -->
  </div>
  <!-- /.box-header -->
  <div class="box-body" style="display:none;">
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  <h3>The body of the box</h3>
  </div>
  <!-- /.box-body -->
  <div class="box-footer" style="display:none;">
    The footer of the box
  </div>
  <!-- box-footer -->
</div>
<!-- /.box -->

You are missing display:none; in .box-body & .box-footer.

Hope this will help you.