Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

Posts List


2011년 8월 8일 월요일

[펌] 구글 블로그에서 펼치기/접기 Show/Hide 기능 추가하기


1. 대시보드 –> 꾸미기 –> HTML 편집 –> 스킨수정
Ctrl+F를 눌러 </head>를 찾고, </head> 윗줄에 아래의 소스 삽입
<script language='JavaScript' type='text/javascript'> 
function layer_toggle(obj) {
    if (obj.style.display=='none') obj.style.display = 'block';
    else if (obj.style.display=='block') obj.style.display = 'none'; } 
</script> 
 2. 글 작성시 HTML 편집에서 아래와 같이 사용
여러 개의 펼치기/접기를 이용할 땐 밑줄 친 A, B를 바꾸면서 추가해 줍니다. 
<div id="A" style="display: block;"> 
<a onclick="layer_toggle(document.getElementById('A')); layer_toggle(document.getElementById('B')); return false;" href="#">접힌 상태</a>
</div> 
<div id="B" style="display: none;"> 
<a onclick="layer_toggle(document.getElementById('A')); layer_toggle(document.getElementById('B')); return false;" href="#">펼친 상태</a>
  내용을 적습니다
</div> 

예제




참고자료 –> http://blog.naver.com/dionly/120034759268
           http://naaams.blogspot.com/2010/12/showhide.html

댓글 3개:

  1. 윗 글에서 1번을 하고 난 다음에 2번을 해야 정상적으로 작동을 하는 건가요? 아니면 방법이 2가지인건가요?

    답글삭제
    답글
    1. 네 두개를 같이 써줘야 작동합니다. ^^ 예전에 쓰려고 퍼왔던 건데 마침 좀 더 살펴봐야겠네요... 흠..

      삭제
    2. 역시 내용이 이상했던.... 내용 수정했습니다.

      삭제