좋은 하루 보내고 계신가요?
해당 글은 인장 접기에 관한 문의 쪽지가 와서 혹 모르시는 다른 분들도 보시라고 작성하게 되었습니다.
먼저, 기본적으로 인장 접기를 사용하는 방법은 이미지로 정리가 잘 된 오도라님의 글을 봐주시면 되겠습니다.


오도라님 글이나 다른 분들의 인장 접기 글을 통해 기본적인 인장 접기 사용법은 이해하고, 많은 분들이 쓰고 계실텐데요.
인장 접기를 여러개 쓰고 싶어 하시는 분들도 계실테지요.. 제 인장이 그 예시고요.
그래서 여러개의 인장 접기를 조화롭게(?) 사용할 수 있는 방법에 대해 설명 드리려고 합니다.

※ 귀찮으신 분은 연두색 박스의 내용을 모조리 복사하여 붙여넣기 하시고, 본문의 굵게 표시된 사항 읽어주세요.

<!--
이건 알고 가자!

※ 본 내용은 주석처리 되어있기 때문에 복붙 사용하실때 놔두셔도, 삭제하셔도 무방합니다.

● 태그네임 부분은 같은 색이 칠해진 부분을 통일시켜야 합니다.
● display: 부분이 block 인 경우가 표시, none 인 경우가 비표시 입니다. (핵심)
● 구역 설정 태그의 위치에 접힌 인장이 펼쳐지는 위치가 달라집니다. 
  (테이블 태그를 사용할 경우에는 한 군데로 몰아둡니다. 관리도 더 편해요.)
● 구역 설정 태그 부분에서 처음부터 보이도록 하고 싶은 구역은 display를 block으로 바꿔주시면
  처음부터 보여집니다.
● width: 와 height: 부분의 값을 퍼센트값 또는 픽셀값으로 변경하시면 해당 픽셀만큼 표시할 수 있습니다.
● document.getElementById('태그네임2').style.display=='block)?'none':'none'; 의 해석 
:  태그네임2의 디스플레이 상태가 표시라면, 비표시해주세요. 그렇지 않아도 비표시 해주세요.
● document.getElementById('태그네임1').style.display=='none')?'block':'none'; 의 해석
:  태그네임1의 디스플레이 상태가 비표시라면, 표시해주세요. 그렇지 않다면 비표시로 두세요.
● 테이블 태그를 이용하여 구역 링크 태그를 깔끔하게 정리하실 수 있답니다. (제 인장이 사용중)
  테이블 태그로 정리된 접기 태그를 사용하고 싶으시다면 아래의 붉은 박스를 복붙하여 사용하세요.

-->

<!-----------  구역 링크 태그 입니다. ----------->
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='none')?'block':'none'; <!-- 태그네임1이 비표시면 표시해주세요 -->
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='block')?'none':'none'; <!-- 태그네임2가 표시중이라면 안보이게 해주세요 -->
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='block')?'none':'none'; <!-- 태그네임3이 표시중이라면 안보이게 해주세요 -->
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='block')?'none':'none';"> <!-- 태그네임4가 표시중이라면 안보이게 해주세요 -->
첫 번째 구역만 표시하고, 나머지는 비표시합니다.
</div>
<!----------- 구역 본문 태그 입니다. ----------->
<div id="태그네임1" style="width: 100%; display: none;">

첫 번째 구역의 내용을 이곳에 입력하시면 됩니다.

</div>



<!-----------  구역 링크 태그 입니다. ----------->
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='block')?'none':'none';
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='none')?'block':'none';
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='block')?'none':'none';
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='block')?'none':'none';">
두 번째 구역만 표시하고, 나머지는 비표시합니다.
</div>
<!----------- 구역 본문 태그 입니다. ----------->
<div id="태그네임2" style="width: 100%; display: none;">

두 번째 구역의 내용을 이곳에 입력하시면 됩니다.

</div>



<!-----------  구역 링크 태그 입니다. ----------->
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='block')?'none':'none';
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='block')?'none':'none';
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='none')?'block':'none';
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='block')?'none':'none';">
세 번째 구역만 표시하고, 나머지는 비표시합니다.
</div>
<!----------- 구역 본문 태그 입니다. ----------->
<div id="태그네임3" style="width: 100%; display: none;">

세 번째 구역의 내용을 이곳에 입력하시면 됩니다.

</div>



<!-----------  구역 링크 태그 입니다. ----------->
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='block')?'none':'none';
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='block')?'none':'none';
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='block')?'none':'none';
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='none')?'block':'none';">
네 번째 구역만 표시하고, 나머지는 비표시합니다.
</div>
<!----------- 구역 본문 태그 입니다. ----------->
<div id="태그네임4" style="width: 100%; display: none;">

네 번째 구역의 내용을 이곳에 입력하시면 됩니다.

</div>

기본적으로 위의 내용에는 태그네임이 1부터 4까지 있는 것을 보실 수 있는데요.
나는 4개로는 부족하다 하시면 더 추가하셔도 됩니다...만
추가하신 만큼 구역 링크 태그마다 추가분에 대한 디스플레이 설정 태그를 넣어주셔야 합니다.

예) document.getElementById('태그네임7').style.display=(document.getElementById('태그네임7')
.style.display=='block')?'none':'none';">

그리고 추가한 구역에 대한 링크도 추가를 해주어야겠지요.

예) 
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='block')?'none':'none';
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='block')?'none':'none';
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='block')?'none':'none';
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='block')?'none':'none';
document.getElementById('태그네임5').style.display=(document.getElementById('태그네임5')
.style.display=='block')?'none':'none';
document.getElementById('태그네임6').style.display=(document.getElementById('태그네임6')
.style.display=='block')?'none':'none';
document.getElementById('태그네임7').style.display=(document.getElementById('태그네임7')
.style.display=='none')?'block':'none';">
일곱 번째 구역만 표시하고, 나머지는 비표시합니다.
</div>

네.. 보시면 아시겠지만.. 접기구역이 많아질 수록 하나의 링크마다 줄이 많이 길어지는 것을 보실 수 있습니다..
그러니 적당히 추가해서 사용하시는게 관리하시기 수월하답니다...

글재주가 좋지 않아 이해가 잘 되셨는지 모르겠네요..

일단 연두색 박스 안의 내용을 전부 복사해서 사용하셔도 정상 작동할테니, HTML로 입력하신 뒤에,
어떻게 작동하는지 block과 none을 바꿔 입력해보시면 감이 오실겁니다.

마지막으로, 테이블 태그를 추가한 태그도 아래에 적어두겠습니다.

<table border="0">
<tr>
<td height="35" width="110">
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='none')?'block':'none'; <!-- 태그네임1이 비표시면 표시해주세요 -->
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='block')?'none':'none'; <!-- 태그네임2가 표시중이라면 안보이게 해주세요 -->
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='block')?'none':'none'; <!-- 태그네임3이 표시중이라면 안보이게 해주세요 -->
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='block')?'none':'none';"> <!-- 태그네임4가 표시중이라면 안보이게 해주세요 -->
첫 번째 구역
</div></td>

<td width="110">
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='block')?'none':'none';
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='none')?'block':'none';
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='block')?'none':'none';
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='block')?'none':'none';">
두 번째 구역
</div></td>

<td width="110">
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='block')?'none':'none';
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='block')?'none':'none';
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='none')?'block':'none';
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='block')?'none':'none';">
세 번째 구역
</div></td>

<td width="110">
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='block')?'none':'none';
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='block')?'none':'none';
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='block')?'none':'none';
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='none')?'block':'none';">
네 번째 구역
</div></td>
</tr></table>

<!----------- 여기서부터 구역 설정 태그 입니다. ----------->

<div id="태그네임1" style="width: 100%; display: none;">
첫 번째 구역의 내용을 이곳에 입력하시면 됩니다.
</div>

<div id="태그네임2" style="width: 100%; display: none;">
두 번째 구역의 내용을 이곳에 입력하시면 됩니다.
</div>

<div id="태그네임3" style="width: 100%; display: none;">
세 번째 구역의 내용을 이곳에 입력하시면 됩니다.
</div>

<div id="태그네임4" style="width: 100%; display: none;">
네 번째 구역의 내용을 이곳에 입력하시면 됩니다.
</div>