열기/닫기(more/less) 태그 3종 세트

블로그를 쓰다보니, 쓸 데 없이 글이 길어지거나 사진이 많이 첨부 되어서
스크롤의 압박이 커질 때가 생겼다. 그래서 보다 구체적인 정보를 필요한 사람에게만
제공 할 수 있도록 more-less 태그가 절실하였다.
처음에는 이런 것이 있는 지도 몰랐지만, 네이버 블로거들이 자주 사용하는 것을 보고
'소스 보기'를 통해 연구했다. 그러나 실제로 네이버 블로그에는 글을 작성하는 에디터에
메뉴로서 기능이 존재하고 있었고, 소스보기 같이 무식한 방법을 이용하지 않아도
간단한 태그로서 이미 존재하고 있다는 사실을 깨달은 건 너무나도 나중이었다.
이제는 포스팅 하다가 필요할 때마다 일일이 검색해서 찾지 않아도
내 블로그에서 쉽게 찾아 쓸 수 있겠네?ㅋㅋㅋ

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>
↑빨간 부분을 제거하면 클릭한 뒤에는 본문만 남게 되고 여닫는 버튼은 사라지게 된다.

닫기

이 more/less 태그 3종 세트는 이글루의 샐리님 포스트를 훔쳐보고 만들었다. 훔쳐보도록 열심히 연구해서 포스팅 해주신 샐리님께 감사~!

invalid-file