출처:schaffen.egloos.com
이상이.. 샤펜님의 이글루에서 알아낸 접기태그방법인데.. 줘도못먹는 저는 뭔가요..
아 컴맹인가.. 밑에 재야장수등용표가 너무길어 접고싶었는데.. 계속 오류만 나네요..
ㅠㅠ 흙흙.. 정말 블로깅하기 싫은날입니다.
접기태그
글이 길때 보기쉽도록 해주는 열기/닫기 태그입니다.
스크립트는 참 귀찮네요 소스보기 편하게 줄바꿈했더니 바로 작동안되는 상황이 나와버리는..
이글루 시작하고나서 바로 접기태그를 올렸었는데 나중에보니 안되더군요. 그래서 다시 올려놓습니다.
1. 열고 닫을때 나오는 글자가 변하지 않는 상태입니다.
클릭
내용
<a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0)">클릭</a><div style="DISPLAY: none">
내용
</div>
2. 기본 설정이 열려 있는 상태입니다.
[열기]
내용
<a onfocus="blur()" onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'[닫기]':'[열기]';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0);">[닫기]</a><div style="DISPLAY: block">
내용
</div>
3. 기본설정이 닫혀있는 상태입니다.
[열기]
내용
<a onfocus="blur()" onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'[닫기]':'[열기]';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0)" ;>[열기]</a><div style="DISPLAY: none">
내용
</div>
일단 처음 시작인 <A <div 바로전인 내용 부터>까지는 줄바꿈을 하지않고 명령어 사이에 공백도 없이 그대로 써야합니다.
그리고 2 와 3의 차이는 <div style="DISPLAY: none">에서 DISPLAY의 설정이 none 이냐 block 이냐 이 차이밖에 없습니다.
block은 열려있는 상태, none은 닫혀있는 상태(없는 상태) 이니 이것만 수정하시면 됩니다.
2번과 3번은 제목을 3개나 써야해서 조금 귀찮은데.. 조금 더 쉽게 하는 방법이 있는것도 하지만... 잘 모르겠으니 패스~
덧글