Tekhartha의 인공지능 기술블로그

블로그에서 펼치기/접기 기능 구현하기

|


블로그에 펼치기와 접기 기능을 구현하는 방법을 포스팅한다.

먼저 head.html 파일에 들어가서, <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> 

다음, 해당 기능을 구현할 때 다음과 같은 html 구문을 이용한다.

<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> 
<span style = "line-height:50%"><br></span>
펼친 후 보여질 내용
</div>

실제 구현하면 다음과 같아진다.

간-단.

Comments