Feex,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.cont {
cursor:pointer;
}
.cont-hide {
display:none;
}
.cont-show {
text-align:left;
display:block;
width:215px;
}
.cont-show a {
text-decoration:none;
color:#BAB7B8;
}
.cont-show a:hover {
text-decoration:none;
color:green;
}
</style>
</head>
<body>
<div class="cont">1_1
<div class='cont-hide'>text1
</div>
</div>
<div class="cont">2_2
<div class='cont-hide'>text2
</div>
</div>
<script>
var contents = document.getElementsByClassName('cont');
for ( i = 0; i < contents.length; i++){
contents[i].onclick = function() {show(event,this);};
}
var selectedText;
function show(event,elem){
if(event.target != elem) return;
var text = elem.getElementsByTagName('div')[0];
var clas = text.className;
selectedText && text != selectedText && (selectedText.className = 'cont-hide')
text.className = clas == 'cont-hide' ? 'cont-show' : 'cont-hide';
selectedText = text
}
</script>
</body>
</html>