자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용

고객센터 질문과답변 페이지를 보여 줄때 답변 내용이 길게 나올 경우 페이지가 쭉 늘어나 정작 필요한 답변을 찾기가 쉽지가 않습니다.
이럴때 답변은 숨겨 놓고 질문 제목을 클릭하면 답변이 보이며 좀전 열었던 답변은 숨기는 기능을 자바스크립트와 style display을 이용해서 적용해 보겠습니다.


1. 자바스크립트 소스

<script language="javascript">
<!--
function QnaShow(qna) {
 /* 질문 갯수 만큼 추가 해 줍니다 */
 document.all.qna1.style.display = "none";
 document.all.qna2.style.display = "none";
 document.all.qna3.style.display = "none";
 /* 요청한 답변을 보이기 처리 입니다 */
 var obj = eval("document.all." + qna);
 obj.style.display = "block";
}
//-->
</script>

2. 테이블 소스

<table>
 <!-- 질문 1 -->
 <tr>
  <td><a href="javascript:QnaShow('qna1')">질문1</a></td>
 </tr>
 <tr id="qna1" style="display:none;">
   <td>답변1</td>
 </tr>
 <!-- 질문 2 -->
 <tr>
  <td><a href="javascript:QnaShow('qna2')">질문2</a></td>
 </tr>
 <tr id="qna2" style="display:none;">
   <td>답변2</td>
 </tr>
 <!-- 질문 3 -->
 <tr>
  <td><a href="javascript:QnaShow('qna3')">질문3</a></td>
 </tr>
 <tr id="qna3" style="display:none;">
   <td>답변3</td>
 </tr>
</table>

3. 소스 설명 :
제목을 클릭시 자바스크립트 QnaShow() 함수를 호출합니다.
이때 함께 전달한 qna 값으로 어떤 질문을 클릭했는지 구분합니다.
먼저 모든 질문을 숨기기 처리합니다.
1번 질문을 본뒤에 2번 질문을 클릭시 1번 질문을 숨기고 2번 질문의 답변을 보여주기 위한 처리인데 일괄적으로 모든 질문의 답변을 숨긴뒤에 원하는 답변만 보여주는 처리 입니다.
열려있는 질문만 숨기기 코딩하면 좋겠지만 오히려 소스가 복잡해줄수 있으므로 질문추가시 자바스크립트 항목중 document.all.qna3.style.display = "none"; 이부분도 함께 추가해 줍니다.
숨기기 처리가 끝나면 var obj = eval("document.all." + qna); 에서 obj로 클릭한 질문의 답변 <tr> id값을 조합합니다.
그리고, obj.style.display = "block"; 에서 지정한 <tr> style의 display 값을 block 으로 적용해서 보이도록 합니다.
이와같은 적용으로 페이지를 다시 접속하지 않고도 보이기 또는 숨기기 적용이 됩니다.

 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=asp&wr_id=34