如何实现手风琴折叠页面效果

          具体的业务需求是这样的,加载页面时很普通的一个基础信息页面,当选中人员类别时,根据选中的结果会相应的出现折叠页面,比如说下拉框中有三个选项1,2,3,选中2时页面会多出一部分页面,当选中其他选项时,该处页面又会折叠回去,隐藏不显示,整个页面的效果很像手风琴,展开再折叠再展开,所以称之为手风琴折叠页面.

    今天我们就来具体说一下实现的流程.首先前台页面的js函数:

           function showAccordionDiv(){	
	        //取到对应属性的value值
		var sTypeValue = $("#SType").find("option:selected").text();
		//取到对应属性的key值
		var sTypeCode = $("#SType").val();   

		if(sTypeCode == 2){
				
			var htmlDiv = "";
			htmlDiv += '<div class="main_content_bg" id="showOutCauseDivId">';
			htmlDiv += '<div class="main_content_title"><a id="lblTitle">AAAA</a></div>';
			htmlDiv += '<div class="main_top_bg">';
			htmlDiv += '<div id="employQuery">';
			htmlDiv += '<table width="100%" border="0" cellspacing="1" cellpadding="0" class="module_table_bg"><tr>';
				
			htmlDiv += '<td class="content_title_right" width="10%">BBBB</td>';
			htmlDiv += '<td class="content_content" width="40%">';
			htmlDiv += '<input type="text" hidden="hidden" value="${personRetireInfo.SGuid