js content 折叠

.open{
 background: url(../images/downArrow.gif);
}
.close{
    background: url(../images/upArrow.gif);
}

 

 

.post_body { padding:5px 15px; }
.post_bodyclose{ padding:5px 15px;height:100px; overflow:hidden; }

 

function openContentAndClose(obj,id)
   {
    var post=document.getElementById(id);
    if(obj.className == "open")
    {
     obj.className = "close";
     post.className="post_body";
    }
    else{
     obj.className = "open";
     post.className="post_bodyclose";
    }
   }

 

 

 

                        <div class="post">
                            <h1>
                            <span style="float: right"><a onclick="openContentAndClose(this,'post<c:out value="${post.id}"/>')" class="open">&nbsp;&nbsp;&nbsp;&nbsp;</a></span>
                                <c:out value="${post.title}"/>
                              
                         </h1>
                         <div class="post_bodyclose" id="post<c:out value="${post.id}"/>">
                             <p>
                                 <c:out value="${post.content.value}" escapeXml="false"/>
                             </p>
                         </div>