I wrote a more flexible js effect of expanding and collapsing_javascript skills

Let’s take a look at the effect first:

The specific functions are :
1. There is at most one page that displays all the content.
2. When you are in full display, click on your own to hide yourself.
3. When you are in full display, if you click on other expands, your own content will be hidden, and the original "Collapse" will become "Expand"
And the clicked option will display all the content and "Expand" Change to "Collapse"
============================================ ========
Part of the code :
============================ ======================

Copy code The code is as follows :

${info.sender } ${info.content }

Delete < ;span class="fr ml5 mr5">|
Collapse

Expand

js code

Copy code The code is as follows:

/**
* Expand notifications and collapse notifications

* 1. When clicking on the expansion function of a certain ID, first close all, and then expand the ID notification. When expanding the ID, class='fl w500' class ="ex_arrow ex_arrowUp mr5" Collapse
* 2. When clicking to collapse an id, class='fl symbleDot w500' class="ex_arrow ex_arrowDown mr5" Expand
* @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){
//The object itself (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_" id).html("Collapse") ;
$("#a_" id).attr("name", "1");
}else if(a_name == "1"){
$("#span_content_" id) .attr("class","fl symbleDot w500");
$("#a_" id).html("Expand");
$("#a_" id).attr("name", "0");
//$("#record").attr("value",id);
}
}else if(id != record){
//New object id, last clicked object record
var older_name = $("#a_" record).attr("name");
//The last clicked object
if(older_name == "0"){
$("#span_content_" record).attr("class","fl w500");
$( "#a_" record).html("Collapse");
$("#a_" record).attr("name", "1");
}else if(older_name == "1"){
$("#span_content_" record).attr("class","fl symbleDot w500");
$( "#a_" record).html("Expand");
$("#a_" record).attr("name", " 0");
}
//New object
if(a_name == "0"){
$("#span_content_" id).attr("class","fl w500" );
$("#a_" id).html("Collapse");
$("#a_" id) .attr("name", "1");
}else if(a_name == "1"){
$("#span_content_" id).attr("class","fl symbleDot w500" );
$("#a_" id).html("Expand");
$("#a_" id). attr("name", "0");
}
$("#record").attr("value",id);
}
};