자바스크립트 펼치기 접기 소스

일단 다음 예제를 보자. 

글 내용 펼치기

위와 같은 효과를 주기 위해서는 Span태그의 스타일인 Display를 조절하면 된다. 위 예제의 소스코드는 다음과 같다. 

(Language : html4strict)

1. <SPAN id=test1_1><A  href="javascript:Open();">글 내용 펼치기</A></SPAN>
2. <SPAN id=test1_2 style="DISPLAY: none"><A href="javascript:Close();">글 내용 접기</A><br />글 내용을 펼쳐야 이 부분이 보이게 됩니다. </SPAN>
3. <script name=javascript>
4.     function Open()
5.     {
6.         document.getElementById('test1_1').style.display='none';
7.         document.getElementById('test1_2').style.display='';
8.     }
9.     function Close()
10.     {
11.         document.getElementById('test1_2').style.display='none';
12.         document.getElementById('test1_1').style.display='';
13.     }
14. </script>


원리는 간단하다. '글 내용 펼치기' 링크와 실제 보여줄 내용을 각각 다른 span 안에 넣어둔 후 두 레이어가 서로 번갈아가며 보이면 되는 것이다. 이를 자바스크립트를 이용하여 구현하기 위해서는 getElementById라는 함수를 쓰게 되는데, 이는 span 태그에서 설정한 id를 이용하여 해당 객체를 얻어내는 기능을 한다. 객체를 얻어 낸 후에는 스타일의 디스플레이 속성을 조절하게 된다. 디스플레이 속성에 아무 값도 주지 않았을 경우에는 레이어가 보이며, none 속성을 주면 레이어가 보이지 않게 된다.
 
 
[출처] ^^ | 올리브 (http://blog.naver.com/jungang2/100038911567)