more/ress 태그 3종

http://haime.egloos.com/tb/1191057

검색어 : html 접기 펴기 , html 더보기기능 , 보였다 숨었다

http://haime.egloos.com/1191057

예전부터 있던 두가지와 새로 다라나 님의 포스트에서 힌트를 얻어 간단한 접기 태그 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>

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

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든 원하는 대로 아무 이름이나 넣으면 된다.