Comment démarrer l'animation de la boîte réduite (adminlte) immédiatement?

Question

J'utilise la boîte s'est effondrée du modèle adminlte. J'ai un problème que la première fois quand je veux montrer cette boîte (après avoir cliqué sur -), l'animation ne fonctionne pas et le contenu est montré immédiatement. Il commence à travailler après un autre clic. Quelqu'un peut-il me aider à initialiser l'animation immédiatement? ...

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

Answer 1

Ici, vous allez avec une 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 -->

Il vous manque display:none; dans .box-body & .box-footer.

J'espère que cela vous aidera.