안녕하세요 메우입니다.



흔히

<DIV style="TEXT-ALIGN: left; MARGIN: 0px auto; WIDTH: 100%; CURSOR: pointer" onclick="document.getElementById('limuzz_in').style.display=(document.getElementById('limuzz_in').style.display=='none')?'block':'none';">버튼들어갈부분</DIV>
<DIV style="WIDTH: 100%; DISPLAY: none" id="limuzz_in"><P>내용들어갈부분</P></DIV>

이렇게 생긴 태그를 쓰고 계실 겁니다.

여기서 onclick 부분이 접고 열리는 기능을 한다고 보시면 됩니다.

onclick : 눌렀을 때
document.getElementById('limuzz_in').style.display : limuzz_in 이라는 id를 가진 박스(엘리먼트)를
(document.getElementById('limuzz_in').style.display=='none') : 그 박스의 상태가 안보이는(접힌) 상태면
?'block' : 보이게 합니다
'none' : 보이지 않게 합니다


그리고 아래에 실제로 limuzz_in 이라는 id를 가진 박스를 넣어주게 됩니다.

DISPLAY: none : 일단 보이지 않는(접힌) 상태로 만들어둡니다.
id="limuzz_in" : 이 박스의 id를 "limuzz_in"으로 설정합니다.

이렇게 해서 위쪽에 있는 박스를 누르면 아래쪽의 박스가 보여졌다 숨겨졌다 하는 것입니다.


그러므로 이 원리를 안다면 id부분을 바꿔도 된다는 것을 알게 됩니다.

아래는 간단히 쓰실 수 있도록 정리된 태그입니다.

<div style="margin: 0px auto; cursor: pointer" onclick="document.getElementById('limuzz_in').style.display=(document.getElementById('limuzz_in').style.display=='none')?'block':'none';"><img src="접었을 때 보이는 이미지" border="0" /></div>
<div style="display: none;" id="limuzz_in">
    <div><img src="접어놓을 이미지 주소 1" border="0" /></div>
    <div><img src="접어놓을 이미지 주소 2" border="0" /></div>
    <div><img src="접어놓을 이미지 주소 3" border="0" /></div>
</div>

주황색 굵게 표시된 부분을 서로 다르게 바꾸셔서 만드시면 여러개의 접는 인장을 쓰실 수 있습니다.


만드시다가 막히거나 태그에 대해 궁금한 것 있으시면 쪽지 주세요.
친절히 알려드리고 이 글에도 추가하겠습니다!