利用JS和CSS实现点击一个link，使页面上某元素隐藏或显示，同时改变link字样的效果

一、背景阐述

   在一个panelGrid中，一条根记录下有若干条子记录，当点击根记录旁边的“+”符号时，子记录显示在页面上，并且符号由“+”变成“-”；当再次点击“-”符号时，子记录不显示，符号由“-”变成“+”。

二、实现方法

 1.页面代码：

1. <h:form>
2.     <h:panelGrid columns="1" cellpadding="5" rowClasses="" columnClasses="">
3. 
   
5.         <h:panelGroup>
6.             <f:verbatim>
7.               <a href="javascript:hiddenOrShow()" id="linkSign">-</a>
8.             </f:verbatim>
9.             <h:outputText value="Title"/>
10.         </h:panelGroup>
11. 
    
13.         <h:panelGroup id="subTitles">
14.             <h:outputText value="subtitle 1"/>
15.             <h:outputText value="subtitle 2"/>
16.             <h:outputText value="subtitle 3"/>
17.         </h:panelGroup>
18. 
    
20.     </h:panelGrid>
21.  <h:form>

 2.JS代码：

1. <script type="text/javascript">
2.         //<![CDATA[
3.             function hiddenOrShowPanel(){
4.                 if(document.getElementById("form:subTitles").style.display=='none'){
5.                     document.getElementById("form:subTitles").style.display='';
6.                     document.getElementById("linkSign").innerHTML="-";
7.                 }
8.                 else{
9.                     document.getElementById("form:subTitles").style.display='none';
10.                     document.getElementById("linkSign").innerHTML="+";
11.                     }
12.                 }
13.     //]]>
14.         </script>