How to set all boxes collapsed in adminlte? - html

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>

Answer 2

First, add collapsed-box class to <div class="box">.
Then, add display: none inline style to <div class="box-body"> and <div class="box-footer">.
Like this:
<div class="box collapsed-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" style="display: none">
The body of the box
</div>
<!-- /.box-body -->
<div class="box-footer" style="display: none">
The footer of the box
</div>
</div>
It should work.