12/22/2010

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

1. 대시보드 –> 꾸미기 –> HTML 편집 –> 스킨수정

Ctrl+F를 눌러 </head>를 찾고, </head> 윗줄에 아래의 소스 삽입
&#39; 는 작은따옴표(')를 의미하는데 그냥 삽입해도 상관없습니다.

<script language='JavaScript' type='text/javascript'>
function layer_toggle(obj) {
        if (obj.style.display==&#39;none&#39;) obj.style.display = &#39;block&#39;;
        else if (obj.style.display==&#39;block&#39;) obj.style.display = &#39;none&#39;;
}
</script>



2. 글 작성시 HTML 편집에서 아래와 같이 사용

여러 개의 펼치기/접기를 이용할 땐 밑줄 친 more01a, more01b를 바꾸면서 추가해 줍니다.
<div style="display: block" id="more01a">
<a onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b')); return false;" href="#">
<p>
접힌 상태</p>
</a></div>
<div style="display: none" id="more01b">
<a onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b')); return false;" href="#">
<p>
펼친 상태</p>
</a><p>
내용을 적습니다</p>
</div>


3. 사용 예



참고자료 –>
http://blog.naver.com/dionly/120034759268

댓글 1개: