html div 확장

Question

내 프로젝트에서 내 div 섹션을 확장해야합니다. 링크를 클릭하면 "더보기"라고 말합니다.

어떻게이 작업을 수행 할 수 있습니까?

확인 각 게시물이 있습니다 www.facebook.com에있는 하나의 div 영역 못할 섹션을 포함하는 경우 ...

이

내가 한 일의 스크린 샷이다, 더보기

코드 :

<div id="page" > 
    <div id="page-bgtop"> 
     <div id="page-bgbtm"> 
      <div id="content" style="min-height:400px" > 
       <div class="post" > 
        <h2 class="title"><a href="#">UPDATES</a></h2> 
        <% 

        try{ 
         st1=con1.createStatement(); 
         ResultSet rs=st1.executeQuery("select * from article ORDER BY artid DESC"); 

          %> 
          <div style="width:450px; word-wrap: break-word;"> 
          <% 
          while(rs.next()) 
         { 
         String s=rs.getString("article"); 
         out.println("<div>"); 
         out.println("<p align ='justify' >"+s+"</p>"); 
         out.println("<hr style='border:dashed #FFFFFF; border-width:1px 0 0 0; height:0;line-height:0px;font-size:0;margin:0;padding:0;'>"); 
         out.println("</div>"); 
         } 
          %> 
          </div> 
          <% 


        }catch(Exception e){ 
         //System.out.println("exception is "+e); 
         e.printStackTrace(); 
        } 





        %> 
       </div> 

Answer 1

링크의 온 클릭 이벤트에 자바 스크립트 함수를 추가합니다. 해당 자바 스크립트 함수에서 관련 div의 display 속성을 display:hidden 또는 display:block으로 설정합니다.

또는

당신은 CSS 높이 속성을 사용하여 초기 높이를 설정하고 관련 링크의 다음 onclick overflow-y:hidden을 설정, 모든 콘텐츠를 볼 수있는 DIV의 높이를 변경할 수 있습니다.

Answer 2

here처럼 JQuery의 .show 및 .hide 메소드를 사용하여 div를 노출/숨길 수 있어야합니다.