How to set all boxes collapsed in adminlte?

Question

I have a collapsible box in adminlte. by default when page loads, it's expanded. How to make it collapsed by default?

Here is what I have used to make box:

https://adminlte.io/docs/2.4/js-box-widget

My HTML:

<div class="box">

  <div class="box-header with-border">

    <h3 class="box-title">Collapsible Box Example</h3>

    <div class="box-tools pull-right">
      <!-- Collapse Button -->
      <button type="button" class="btn btn-box-tool" data-widget="collapse">
        <i class="fa fa-minus"></i>
      </button>
    </div>

  </div>

  <div class="box-body">
    The body of the box
  </div>

  <div class="box-footer">
    The footer of the box
  </div>

</div>

My script:

<script>
$('.box').boxWidget({
    animationSpeed: 500,
    collapseTrigger: '#my-collapse-button-trigger',
    removeTrigger: '#my-remove-button-trigger',
    collapseIcon: 'fa-minus',
    expandIcon: 'fa-plus',
    removeIcon: 'fa-times',
    hide: true
})

Answer 1

Try boxWidget('collapse')

$('.box').boxWidget({
    animationSpeed: 500,
    collapseTrigger: '#my-collapse-button-trigger',
    removeTrigger: '#my-remove-button-trigger',
    collapseIcon: 'fa-minus',
    expandIcon: 'fa-plus',
    removeIcon: 'fa-times',
    hide: true
})

$('.box').boxWidget('collapse')

OR add collapsed-box class

<div class="box collapsed-box">
 ...
</div>