moer/less 스크립트

스크립트 소스 보기

닫기

<div id="test_click1" style="display:block" align="center">
    <a href="#none" onclick="document.getElementById('test_more').style.display='block';document.getElementById ('test_click1').style.display='none';document.getElementById('test_click2').style.display='block'">보기</a>
</div><div id="test_click2" style="display:none" align="center">
    <a href="#none" onclick="document.getElementById('test_more').style.display='none';document.getElementById ('test_click2').style.display='none';document.getElementById('test_click1').style.display='block'">닫기</a>
</div>
<div id='test_more' style="display:none">
여기에 본문
</div>

이글루스에서 사용하는 여러가지 스크립트가 있는데 소스보기를 해서 가져와도 나한테는 안되더라..이상하게..

IE에서는 뭘써도 다되더만.. 테터툴즈는 에디터에서 이 기능을 지원해서 편리하던데..이글루도 언넝 지원해줬으면 좋겠다.

이리저리 헤메이다가 IE와 불여우 에서 동작하는것을 구해서 내가 쓰기 편하게 수정했다.

세부분으로 나누어 간단히 설명해 보자면

<div>태그에 대해서는 단순히  영역을 갖는 상자 정도로만 생각하고 자세한건 찾아보자
style="display:block"  는 보이게되고
style="display:none"   는 보이지 않게된다. 이정도만 알고 아래를 보자

최초 보이는부분
<div id="test_click1" style="display:block" align="center">
    <a href="#none"
         onclick="document.getElementById('test_more').style.display='block';
                     document.getElementById('test_click1').style.display='none';
                     document.getElementById('test_click2').style.display='block'">보기
   </a>
</div>

닫기 표시하는 부분
<div id="test_click2" style="display:none" align="center">
    <a href="#none"
         onclick="document.getElementById('test_more').style.display='none';
                      document.getElementById('test_click2').style.display='none';
                      document.getElementById('test_click1').style.display='block'">닫기
    </a>
</div>

본문 부분
<div id='test_more' style="display:none">
</div>

핵심부분은 onclick의 부분이다. test_click1의 경우를 살펴보자.

document.getElementById('test_more').style.display='block';   //본문인 test_more는 보이게 하고
document.getElementById('test_click1').style.display='none';  // '보기'가 표시된 test_click1은 감추고
document.getElementById('test_click2').style.display='block'   //'닫기'가 표시된 test_click2는 보이도록 설정했다.


세부분은 서로 독립적인 공간이므로 닫기를 원하는데 아무데나 두어도 동작한다.

아래의 참조한 링크들 부분에선 '닫기'를 아래쪽에 배치했다.

이 포스팅에서처럼 두군데 이상 이기능을 사용하려면 id인 test_more, test_click1, test_click2의 쌍을 맞춰줘야 한다.
또한 한페이지에 포스팅이 여러개 보이게 한경우에는 ID를 잘 관리해주지 않으면 꼬이게되니..어찌보면 좀 귀찮을 수도 있겠다. ㅡ.ㅡ;;

참조한 링크들

참고한 링크 들입니다.
다중 접기용 스크립트 복사 기능
-->IE만 사용하시는분이라면 이걸 응용하면 편리할듯
more/less 태그 3종 세트
-->무척 간결하다. 여러개 사용할때도 편리하다.
More & Less 넷스케잎에서도 성공...
--> 이링크의 소스 에서 "" 로 묶고 내가 보기 편하게 인덴트 맞추고 센타 정렬만 했다.

닫기 아래에 붙임

샐리님 3종세트중에서 2번에다가 중앙정렬, 굵게를 추가한코드

소스보기

<a align='center' href='javascript:void(0)' onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'<p align='center'><strong>닫습니다.</strong></p>':'<p align='center'><strong>소스보기.</strong></p>';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none'";><p align='center'><strong>소스보기</strong></p></a><DIV style='display:none' align='center'>
내용 쓰삼
</DIV>