Please refer to this example.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Panel - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<style>
.c1{
margin-bottom: 20px;
}
</style>
<script>
$(function(){
const panels = $('.c1').find('.panel-body');
panels.each(function(){
$.extend($(this).panel('options'),{
onCollapse: ()=>{
panels.panel('resize')
},
onExpand: ()=>{
panels.panel('resize')
}
});
})
panels.panel('resize')
})
</script>
</head>
<body>
<div class="easyui-panel" title="Panel1" style="width:100%;height:200px;padding:10px;"
data-options="collapsible:true,collapsed:true,cls:'c1'">
</div>
<div class="easyui-panel" title="Panel2" style="width:100%;height:200px;padding:10px;"
data-options="collapsible:true,collapsed:true,cls:'c1'">
</div>
<div class="easyui-panel" title="Panel3" style="width:100%;height:200px;padding:10px;"
data-options="collapsible:true,collapsed:true,cls:'c1'">
</div>
</body>
</html>
