本课程学习使用动态面板的OnClick, OnMove, OnHide, OnShow事件，设计手风琴面板。

多层菜单

步骤1：转换部分内容为动态面板

首先，打开AccordionControl.rp文档Accordion Control页面。
因为每部分内容在展开收起时，都要上下移动，所以将每部分内容做成一个动态面板，3个部分的内容都包括手风琴面板的头和面板内容两个部件。右键选择“转换->转换为动态面板”，将选中的两个部件移到它们的动态面板中。其它两个部分内容重复操作。
接下来，分别命名3个动态面板的标签名称为："Section 1", "Section 2" ，"Section 3"

步骤2：转换内容为动态面板

需要能够显示、隐藏每个部分的内容，所以要将每个部分的内容部件转换为动态面板。
从第一部分开始，双击第一部分的面板，打开编辑页面。选择内容组件（带lorem ipsum文字内容的矩形部件），将内容组件转换为动态面板。命名内容组件面板标签为“Section 1 Content”。
重复设置第二、三部分的内容组件，分别命名第二、三部分的内容组件标签为：Section 2 Content和Section 3 Content。

步骤3：设置内容面板为隐藏

默认每一个内容面板都要被隐藏。
返回第一部分面板页面，选择Section 1 Content面板，右键Section 1 Content面板，快捷菜单选择“编辑动态面板->设为隐藏”。
重复设置第二、三部分的内容面板。

步骤4：切换内容面板可见性

返回第一部分面板，选中面板头部，添加OnClick事件用例，用例动作设置为“切换Section 1 Content的可见性”。
第二、三部分面板的头部，重复上述步骤，添加用例动作分别切换各自的内容面板可见性。

步骤5：上下移动第二部分

当一个部分展开、收起时，在它下面的其它部分要跟随它一起上，下移动。
打开第一部分的状态1，选中Section 1 Content面板，添加“动态面板显示时”用例，移动第二部分面板相对距离为（0，120）（120px是内容面板的高度）。接下来，添加“动态面板隐藏时”用例，移动第二部分面板相对距离为（0，-120）。

步骤6：上下移动第三部分

当显示、隐藏每二部分内容时，第三部分要随着第二部分内容上下移动。所以，第二部分内容面板的“动态面板显示时”和“动态面板隐藏时”事件添加与步骤5相同的动作。
因为第三部分是最后一个部分，第三部分的内容面板不需要做上述设置。

步骤7：随着第二部分的移动，上下移动第三部分

返回Accordion Control页面，选择第二部分面板。设置每当第二部分移动，第三部分也随着上下移动，在第二部分面板的移动动态面板时添加用例，设置用例动作“移动第三部分面板随着设置面板”。

步骤8：移动动态面板到相应位置

交互设置完成，现在移动面板到相应位置，移动第二部分面板紧贴在第一部分面板下，移动第三部分面板紧贴在第二部分面板下。
全部设置完成，生成原型测试效果，点击每一部分的头部，展开或收缩相应的内容，在它下面的部分随着上下移动。