more/less 태그 3종 세트

예전부터 있던 두가지와 새로 다라나 님의 포스트에서 힌트를 얻어 간단한 접기 태그 3종 세트로 정리했다.

1. 이거 하나로 열고 닫기

<a href='javascript:void(0)' onclick=this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';>클릭</a><DIV style='display:none'>
내용을 쓰시오

<A onclick=this.parentNode.style.display='none'; href=javascript:void(0)>닫기</A></DIV>

↑아래에 나오는 '닫기'를 빼고 싶으면 빨간 부분을 제거한다.

1번 닫기

2. 감추기/보기 전환 태그

<a href='javascript:void(0)' onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'감추기':'보기';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none'";>누르세요</a><DIV style='display:none'>
내용 쓰삼
</DIV>

3. 열기/닫기가 전환되고 덧붙여 [닫기]가 글 맨 아래로 가는 태그

<A onclick="this.nextSibling.style.display='block';this.innerHTML=''"; href='javascript:void(0)'>클릭</a><DIV style='display:none'>
내용 쓰라옹

<A onclick="this.parentNode.style.display='none';this.parentNode.previousSibling.innerHTML='[보기]';" href=javascript:void(0)>[닫기]</A></DIV>

↑ 밑줄친 빨간 부분을 빼면 클릭한 뒤 본문만 남고 여닫는 버튼이 사라지옹.

누르면 닫히옹

...3번 해결하느라 죽는 줄 알았네;;


3번이 IE와 파이어폭스에서 모두 돌아가도록 표준 자바 언어를 조언해주신 모나카 님 감사드립니다. :)




※ 추가 : 1과 3에서 아래쪽 [닫기]로 닫았을 때 화면 스크롤도 같이 위로 올라가게 하고 싶으면 :

<a name="up" href='javascript:void(0)' onclick=this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';>클릭</a><DIV style='display:none'>
내용을 쓰시오

<A onclick=this.parentNode.style.display='none'; href="#up">닫기</A></DIV>

위쪽 태그에는 녹색의 name="up"을 추가하고 아래쪽 태그에서는 href='javascript:void(0)' 대신 href="#up"을 넣는다.
up은 단지 이름값일 뿐이므로 top이든 aaa든 원하는 대로 아무 이름이나 넣으면 된다.