[펌] [웹] 접기 태그 - this.nextSibling.style.display -

( 출처 ) http://byulbada.egloos.com/2227909

궁금했던 [감추기]/[보기] 태그.

[펌]
여기서 주목할 것은 [ nextSibling ]입니다. 이것이 무엇인가 하고 찾아보니, 동일 레벨에서 현재 노드의 다음 노드의 값을 읽기 전용으로 반환해주는 것 같습니다

[소스 예]
<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 style="border-color:green; padding:9px; border-width:1px; border-style:dotted; background-color:#E4FFDA;">내용</div></div>



누르세요

내용



참조한 URL




덧글

  • kun 2011/04/05 17:40 # 답글

    [펌]
    한 가지 주의할 것이 있는데, <a onClick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0)"></a> 와 <div style="DISPLAY: none"></div> 의 사이에 공백이나 줄바꿈이 있어서는 안 된다는 것입니다.
댓글 입력 영역