Use AdminLTE to collapse div
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 折叠面板</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css?version=2.4">
<script src="https://adminlte.io/themes/AdminLTE/dist/js/adminlte.min.js"></script>
</head>
<body>
<div class="col-md-12">
<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" title="编辑" 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">
The body of the box111
</div>
<!-- /.box-body -->
<div class="box-footer">
The footer of the box
</div>
<!-- box-footer -->
</div>
<!-- /.box -->
</div>
</body>
</html>
Key points:
The data-widget = "collapse" element must be placed in the .box-tools div.
After attaching this attribute to the button, allow the box to collapse / expand when clicked.
jquery.js should be loaded in front of adminlte.min.js.
Effect picture:
