I have written an unfolded and collected more energy type JS effect _javascript technique

First look at the effect:

the specific function is：
1. Only one of the top pages on the page shows the full content.
2. When you are in full display, click on their own collection, their own collection.
3. When you are in full display, click on the other spread is, their content is hidden, the original "Put away" into "expansion"
The clicked option is all displayed, "expand" to "close"
=================================================
part of the code：
=================================================

Copy Code code 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}" >
&LT;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> closed
</c:if> <c:if test= "${!up}" >
<span class= "Ex_arrow ex_arrowdown mr5" > </span> unfold
</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 Code code as follows:

/**
* Launch notification and collect notifications <br>
* 1. Click on an ID of the expansion function, first of all the shutdown, and then expand the ID notice, expand ID, class= ' fl w500 ' class= ' ex_arrow ex_arrowup mr5 '
* 2. Click to close an ID, class= ' fl symbledot w500 ' class= ex_arrow ex_arrowdown mr5 ' launches
* @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 ("Wrong request!") ");
}else if (id = = record) {
itself object (the object that is now clicked and the previous action is the same)
if (a_name = = "0") {
$ ("#span_content_" + ID). attr ("Class", "FL w500");
$ ("#a_" + ID). HTML ("<span class= ' ex_arrow ex_arrowup mr5 ' ></span> closed");
$ ("#a_" + ID). attr ("name", "1");
}else if (a_name = = "1") {
$ ("#span_content_" + ID). attr ("Class", "FL symbledot w500");
$ ("#a_" + ID). 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 clicked on object record
var older_name = $ ("#a_" +record). attr ("name");
The object that you clicked last time
if (older_name = = "0") {
$ ("#span_content_" + record). attr ("Class", "FL w500");
$ ("#a_" + record). HTML ("<span class= ' ex_arrow ex_arrowup mr5 ' ></span> closed");
$ ("#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_" + ID). HTML ("<span class= ' ex_arrow ex_arrowup mr5 ' ></span> closed");
$ ("#a_" + ID). attr ("name", "1");
}else if (a_name = = "1") {
$ ("#span_content_" + ID). attr ("Class", "FL symbledot w500");
$ ("#a_" + ID). HTML ("<span class= ' ex_arrow ex_arrowdown mr5 ' ></span> expand");
$ ("#a_" + ID). attr ("name", "0");
}
$ ("#record"). attr ("value", id);
}
};