Html jQuery UI滑入影响页面上的其他div

我试图实现卡幻灯片的效果，但当我点击按钮的顶部栏，我有变化的高度，是马车

但是，如果我不使用jQuery UI，一切都很好，但是滑动动画不可用。

$（“#abc”）。单击（函数（）{
$（“.route card”）.show（“幻灯片”）；
});
$（“#def”）。单击（函数（）{
$（“.list card”）.show（“幻灯片”）；
});
$（“#ghi”）。单击（函数（）{
$（“.details card”）.show（“幻灯片”）；
});
/*==全局样式===*/
*,
*：：之前，
*：：之后{
框大小：边框框；
}
html，
身体{
身高：100%；
}
身体{
字体系列：“Inter”，无衬线；
背景色：#ccc；
填充：18px；
显示：网格；
网格模板柱：0.8fr 1.5fr 2fr 2fr；
网格模板行：0.12fr 1fr 1fr；
栅隙：18px；
网格模板区域：
“侧导航路线卡顶栏顶栏”
“sidenav路线卡列表卡详细信息卡”
“sidenav航路卡列表卡详细信息卡”；
}
正文>div{
背景色：#fff；
}
/*==（SIDENAV）组件样式===*/
.侧导航{
网格区域：sidenav；
}
/*==（布线卡）组件样式===*/
.路线卡{
网格区域：路线卡；
显示：无；
}
/*==（列表卡）组件样式===*/
.名单卡{
网格区域：列表卡；
显示：无；
}
/*==（详细信息-卡片）组件样式===*/
.详情卡{
网格区域：详细信息卡；
显示：无；
}
/*==（顶栏）组件样式===*/
.顶杆{
网格区域：顶栏；
}

英语区|仪表板
点击我
点击我
点击我
自闭症
尝试对divs使用
最大高度
。@s.kuznetsov我刚刚尝试过，但仍然不起作用。