I wrote a js Effect of more and more types of expansion and collapse.

Let's take a look at the effect:

The specific function is:
1. Only one page can display all the content.
2. When you are on display all, click hide and collapse.
3. When you display all your content, click expand to hide your content. The original "hide" is changed to "Expand"
The clicked options are displayed in full, and "Expand" is changed to "hide"
========================================================== ==========
Some code:
========================================================== ========== Copy codeThe Code is as follows: <tbody>
<Input type = "hidden" id = "record" value = "$ {qr. count}">
<C: forEach items = "$ {qr. results}" var = "info" varStatus = "index">
<Tr id = "user_info _ $ {info. id}">
<Td class = "userWrapper_right_collect">
<P class = "ml20 clearfix mb10">
<Strong class = "ex_green_fg mr10 fl" >$ {info. sender} </strong> <span id = "span_content _ $ {info. id} "$ {index. count eq 1? "Class = 'fl w500 '": "class = 'fl symbleDot w500'" >$ {info. content} </span>
</P> <a href = "javascript: void (0)" onclick = "cancelThisInfo ($ {info. id}); "class =" fr mr20 ex_green_fg "> Delete </a> <span class =" fr ml5 mr5 ">|</span> <a href =" javascript: void (0) "class =" fr ex_green_fg "id =" a _ $ {info. id} "name =" $ {index. count eq 1? '1': '0'} "onclick =" infoContent ('$ {info. id} '); "> <c: if test =" $ {index. count eq 1} "var =" up ">
<Span id = "span _ $ {info. id}" class = "ex_arrow ex_arrowUp mr5"> </span> collapse
</C: if> <c: if test = "$ {! Up} ">
<Span class = "ex_arrow ex_arrowDown mr5"> </span> Expand
</C: if>
</A> <span class = "fr mr10 gray"> <fmt: formatDate value = "$ {info. createTime} "pattern =" yyyy-MM-dd HH: mm: ss "/> </span>
</Td>
</Tr>
</C: forEach>
</Tbody>

Js Code Copy codeThe Code is as follows :/**
* Expand and collapse notifications <br>
* 1. When you click the expand function of an id, close all of them first, and then expand the id notification. When you expand the id, class = 'fl w500 'class = "ex_arrow ex_arrowUp mr5"
* 2. When you click to collapse an id, class = 'fl symbleDot w500 'class = "ex_arrow ex_arrowDown mr5" is displayed.
* @ Date 2013-3-5
* @ Author xhw
*
* @ Param id
*/
Function infoContent (id ){
Var a_name = $ ("# a _" + id). attr ("name ");
Var record = $ ("# record"). val ();
If (id = null | id = ""){
Alert ("request error! ");
} Else if (id = record ){
// Its own object (the object clicked now is the same as the object operated in the previous step)
If (a_name = "0 "){
$ ("# Span_content _" + id). attr ("class", "fl w500 ");
$ ("# A _" + id1_.html ("<span class = 'ex _ arrow ex_arrowUp mr5'> </span> collapse ");
$ ("# A _" + id). attr ("name", "1 ");
} Else if (a_name = "1 "){
$ ("# Span_content _" + id). attr ("class", "fl symbleDot w500 ");
$ ("# A _" + id1_.html ("<span class = 'ex _ arrow ex_arrowDown mr5 '> </span> Expand ");
$ ("# A _" + id). attr ("name", "0 ");
// $ ("# Record"). attr ("value", id );
}
} Else if (id! = Record ){
// New object id, last click Object record
Var older_name = $ ("# a _" + record). attr ("name ");
// The object of the last click
If (older_name = "0 "){
$ ("# Span_content _" + record). attr ("class", "fl w500 ");
$ ("# A _" + record).html ("<span class = 'ex _ arrow ex_arrowUp mr5'> </span> collapse ");
$ ("# A _" + record). attr ("name", "1 ");
} Else if (older_name = "1 "){
$ ("# Span_content _" + record). attr ("class", "fl symbleDot w500 ");
$ ("# A _" + record).html ("<span class = 'ex _ arrow ex_arrowDown mr5 '> </span> Expand ");
$ ("# A _" + record). attr ("name", "0 ");
}
// New object
If (a_name = "0 "){
$ ("# Span_content _" + id). attr ("class", "fl w500 ");
$ ("# A _" + id1_.html ("<span class = 'ex _ arrow ex_arrowUp mr5'> </span> collapse ");
$ ("# A _" + id). attr ("name", "1 ");
} Else if (a_name = "1 "){
$ ("# Span_content _" + id). attr ("class", "fl symbleDot w500 ");
$ ("# A _" + id1_.html ("<span class = 'ex _ arrow ex_arrowDown mr5 '> </span> Expand ");
$ ("# A _" + id). attr ("name", "0 ");
}
$ ("# Record"). attr ("value", id );
}
};