How to achieve accordion folding page effect

The specific business requirements are this, loading the page is a common basic information page, when the category of personnel, according to the selected results will be the corresponding folding page, for example, there are three options in the drop-down box of three-fold, check the 2 O'Clock page will be more than a portion of the page, when the other options, the page will be folded back, Hide does not show, the whole page effect is like accordion, expand and then expand, so called accordion folding page.

Today, let's talk about the implementation process. First the JS function of the foreground page:

           function Showaccordiondiv () {//takes the value of the corresponding property var Stypevalue = $ ("#SType"). Find ("option:selected"). Text ();   The key value of the corresponding attribute is var Stypecode = $ ("#SType"). Val (); if (Stypecode = = 2) {var htmldiv = ""; Htmldiv + = ' <div class= "MAIN_CONTENT_BG" id= "Showoutcausedivid" > '; htmldiv + = ' & Lt;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}" Name= "Personretireinfo.sguid" id= "Sguid" class= "Content_content_ Input "/>"; Htmldiv + = ' <input type= "text" hidden= "hidden" value= "${personretireinfo.spersonguid}" Name= " Personretireinfo.Spersonguid "id=" Spersonguid "class=" Content_content_input "/>"; Htmldiv + = ' <input type= ' text ' value= ' ${ Personretireinfo.sdocguid} "name=" Personretireinfo.sdocguid "id=" Sdocguid "class=" Content_content_input "/>< /TD> '; Htmldiv + = ' <td class= ' content_title_right ' >CCCC</td> '; Htmldiv + = ' <td class= ' Content_ Content ">"; htmldiv + = ' <select id= "Isearlierretire" class= "Content_content_select" Name= " Personretireinfo.isearlierretire ">"; htmldiv + = ' <zw:basedictlist itemcode= "selectvalue=" ${ Personretireinfo.isearlierretire} "></zw:basedictlist>"; Htmldiv + = ' </select></td></tr ><tr> '; Htmldiv + = ' <td class= ' content_title_right ' >DDDDD</td> '; Htmldiv + = ' <td class= ' Content_content ">"; htmldiv + = ' <select id= "Sretiretype" class= "Content_content_select" Name= " Personretireinfo.sretiretype "style=" width:70%; " > '; htmldiv + = ' <zw:basedictlist itemcode= "133" selectvalue= "${personretireinfo.sretiretype}" &GT;</zw:basedictlist> '; Htmldiv + = ' </select> '; Htmldiv + = ' <td class= "Content_title_right" ></td > '; htmldiv + = ' <td class= "content_content" > "; htmldiv + = ' </td> '; Htmldiv + = ' </td></tr>< Tr> '; Htmldiv + = ' <td class= ' content_title_right ' >EEEE</td> '; Htmldiv + = ' <td class= ' content_content "colspan=" 3 ">"; htmldiv + = ' <input id= "dretiredate" type= "text" readonly= "readonly" Name= " Personretireinfo.dretiredate "class=" Wdatelong "onfocus=" Wdatepicker () "value=" <fmt:formatdate value= "${ Personretireinfo.dretiredate} "pattern=" Yyyy-mm-dd "/>"/></td></tr><tr> '; HtmlDiv + = ' < TD class= "Content_title_right" >FFFF</td> '; Htmldiv + = ' <td class= ' content_content ' > '; htmldiv + = ' < Input type= "text" id= "Sworkingage" name= "Personretireinfo.sworkingage" size= "" maxlength= "value=" ${ Personretireinfo.sworkingage} "class=" Content_content_input "/>"; Htmldiv + = ' <td class= ' content_title_right ' & Gt; Gggg</td> '; Htmldiv + = ' <td class= ' content_content ' > '; htmldiv + = ' <input type= ' text ' name= ' Personretireinfo.scontinueworkingage "size=" "maxlength=" "Value=" ${personretireinfo.scontinueworkingage} " class= "Content_content_input"/> '; Htmldiv + = ' </td></tr><tr> '; Htmldiv + = ' <td class= ' content _title_right ">HHHH</td>"; Htmldiv + = ' <td class= "content_content" > "Htmldiv + = ' <input id=" ddiedate "Type=" text "readonly=" readonly "name=" Personretireinfo.ddiedate "class=" Wdatelong "onfocus=" Wdatepicker () "Value=" <fmt:formatdate value= "${personretireinfo.ddiedate}" pattern= "Yyyy-mm-dd"/> "/></td>"; HtmlDiv + = ' &LT;TD class= "content_title_right" >IIII</td> ' htmldiv + = ' <td class= ' content_content ' > '; htmldiv + = ' <select id= "Senddate" class= "Content_content_select" name= "personretireinfo.senddate" > '; htmlDiv + = ' &LT;ZW: Basedictlist itemcode= "134" selectvalue= "${personretireinfo.senddate}" ></zw:basedictlist> '; htmldiv + = ' </select></td></tr><tr> '; Htmldiv + = ' <td class= "Content_title_right" >JJJJ</td> '; Htmldiv + = ' <td class= "content_content" colspan= "3" > "Htmldiv + = ' <input id=" Sretireplace "type=" text "value=" ${personretireinfo.sretireplace} "Name=" Personretireinfo.sretireplace "size=" 42 " Maxlength= "value=" "class=" Content_content_input "style=" width:40%; "/></td></tr>"; HtmlDiv + = ' </table></div></div></div> '; $ ("#otherDiv"). Append (Htmldiv);} else{$ ("#showAccordionDivId"). Remove ();}}

In the HTML tag, respond to the JS function:

<span style= "FONT-SIZE:14PX;" ><TD class= "Content_title_right" > Selected: </td><td class= "Content_content" >    <select id= " Spersontype "Name=" Personbaseinfo.spersontype "class=" Content_content_select "onchange=" ShowAccordionDiv (); ">        <zw:basedictlist itemcode= "<%=constants.s_person_type%>" selectvalue= "${personbaseinfo.spersontype } "></zw:basedictlist><c:if test=" ${personbaseinfo.spersontype== ' 2 '} ">            <script type=" text/ JavaScript ">                showaccordiondiv ();            </script>        </c:if>    </select></td></span>

In this way, we can use the form of a page to load the effect of the accordion, is not it magical? In fact, the whole process of implementation is very simple, the key point is to spell JS function to spell the page, the outer layer is single quotation marks, the inside is the double quotation marks, you can first write in the page you want the style, and then With double quotes and single quotes, you can easily get the effect you want, and then add an onchange event response to the HTML tag. I added a jstl expression to the c:if judgment, that is, when the page loads, if the response value is already loaded in the drop-down box, Then call us to write the JS function, you understand it?

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

How to achieve accordion folding page effect